美文网首页
3-6 DOM事件

3-6 DOM事件

作者: 一杯浊酒 | 来源:发表于2019-04-26 01:42 被阅读0次

问题

  • DOM 事件的级别
  • DOM 事件模型(就是捕获和冒泡儿)
  • DOM 事件流
  • 描述DOM事件捕获的具体流程
  • Event 对象的常见应用
  • 自定义事件

DOM 最重要的内容:

  • 一个是事件原理的掌握,比如捕获和冒泡儿的一个具体流程是怎么样的
  • 第二个是怎么去注册一个事件,也就是监听用户的行为
  • 三个是做响应的时候Event对象是一个非常重要的东西,Event对象常见的应用有哪些呢?

  1. DOM 事件的级别
3-6 DOM事件(一).mp4_20171116_170233.546_看图王.jpg
  1. DOM 事件模型(就是捕获和冒泡)

    • 捕获:从上往下

    • 冒泡:从下往上,从当前元素(目标元素)往上

  2. 事件流

    解释:浏览器在为当前页面与用户做交互的过程中,比如我点击了鼠标的左键,这个左键是怎么传到你的这个页面上,这就是事件流.

    它要怎么响应呢,要分三个阶段

3-6 DOM事件(一).mp4_20171116_171951.350_看图王.jpg

第一阶段是捕获

第二是目标阶段(比如我点击了当前这个按钮),事件通多捕获到达目标元素,这就是目标阶段

第三个阶段就是从目标元素再上传到window对象,也就是冒泡儿过程

  1. 描述DOM事件捕获的具体流程

    • 先想一个问题,我点击页面上一个元素,第一个接受到事件的对象是哪个元素呢?答案是window

    过程如下window-document-html-body

3-6 DOM事件(一).mp4_20171116_175426.105_看图王.jpg
  • 在BOM 中最常用的两个对象一个是window,另一个是document,在事件捕获中是他们两个最先得到;问题又来了,在js中,获取body标签可以用document.body,那么怎样获取html标签呢,能用document.html吗?显然是不能的,获取html标签要用document.documentElemen;
  • 冒泡过程与之相反,从最深的节点到达window对象
  1. Event 对象的常见应用

    Event对象是事件响应非常重要的一个对象,因为你要拿很多用户交互的参数,比如我想拿用户到底击中了哪个键或者按下了键盘的那个按键,等等

3-6 DOM事件(一).mp4_20171116_175817.407_看图王.jpg
  • event.preventDefaut() ,阻止事件的默认行为
  • event.stopPropagation() ,阻止事件冒泡,应用举例,比如我父节点上绑定了一个事件,子节点上绑定了另外一个事件,我不想子节点冒泡到父节点上
  • event.stopImmediatePropagation(), 停止立即传播,举例,比如我绑定了两个click事件1和2,我想通过优先级的方式,第一个响应的函数是a,第二个响应的函数是b,我想让a点击之后就不要执行b了,在a中添加这么一个函数就行了
  • event.currentTarget(), event.target(),这两个对象经常出现在事件委托当中,比如一个for循环中给一个dom注册了n多个事件,问你怎么优化,其实问的就是事件代理,把子元素上的事件代理都绑定到父元素上,一次事件就可以了
  • event.target(),就是当前被点击的那个元素(IE中用srcElement)
  • event.currentTarget(),当前绑定事件的对象,比如父级元素绑定了click事件,event.currentTarget()就是那个指定的父级元素
  1. 自定义事件(模拟事件)
3-6 DOM事件(一).mp4_20171116_185902.876_看图王.jpg
  • 用法的场景:比如我有一个按钮,这个按钮不是一个常规的click事件,先给他自己增加一个事件,我想在别的地方触发这个 事件,而不是用回调的方式去处理,这个时候可以用自定义事件了
var eve = new Event('custome') // 用 new Event 声明一个自定义事件,事件名称为custome,可以把eve当做click一样
dom.addEventListener('custome',function(){ //绑定事件名称
  console.log('Hello World!')
});
dom.dispatchEvent(eve); //通过dispatch这个API触发这个事件

相关文章

  • 3-6 DOM事件

    问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流 描述DOM事件捕获的具体流程 Ev...

  • 前端面试题(3)——DOM事件类

    基本概念:DOM事件的级别 DOM事件模型:事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • DOM0和DOM2级事件简单理解

    关于DOM0 和DOM1级事件可以简单理解为:事件分为DOM 0级事件和Dom 2级事件,DOM2级事件也叫做事件...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

网友评论

      本文标题:3-6 DOM事件

      本文链接:https://www.haomeiwen.com/subject/kmhubxtx.html