一、DOM事件级别

DOM级别一共有四个级别：DOM0级、DOM1级、DOM2级和DOM3级。因为DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

例子：

  • 0级DOMdocument.getElementById("myButton").onclick = function () {alert('thanks');}
  1. 为同一个元素/标签绑定多个同类型事件的时候,是不被允许的，DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。
  • 2级DOMp.addEventListener("click",function(){ console.log(arguments[0]); })
  1. el.addEventListener(event-name, callback, boolean)
  2. event-name: 事件名称，可以是标准的DOM事件
  3. callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event
  4. boolean: 默认是false，代表事件句柄在冒泡阶段执行
  • 3级DOM，在DOM 2级事件的基础上添加了更多的事件类型。
  1. 3级DOM
  2. ------------------------------------------------------------------
  3. UI事件，当用户与页面上的元素交互时触发，如：load、scroll
  4. 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
  5. 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
  6. 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
  7. 文本事件，当在文档中输入文本时触发，如：textInput
  8. 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
  9. 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
  10. 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
  11. 同时DOM3级事件也允许使用者自定义一些事件。

二、DOM事件模型

DOM事件模型有两个：事件捕获和事件冒泡

  • 捕获
    • 从外向内找监听函数，叫做事件捕获
  • 冒泡
    • 从内到外找监听函数，叫做事件冒泡

DOM的事件机制（事件流）

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。DOM事件模型（DOM事件机制） - 图1

target 对比 currentTarget

  • e.target 用户操作的元素
  • e.currentTarget 程序员监听的元素、
  • this是e.currentTarget
  1. 例子
  2. div > span {文字}， 用户行为：点击文字  (监听事件绑定在div元素上)
  3. --------------------------------------------------------------------
  4. e.target 就是span
  5. e.currentTarget 就是div

取消冒泡

捕获不可取消，但是冒泡可以取消

e.stopPropagation()可以中断浏览器不再往上走。

事件对象event下的属性和方法

因为各个浏览器的事件对象不一样, 把主要的事件对象的属性和方法列出来;

  1. bubble ： 表明事件是否冒泡
  2. cancelable ： 表明是否可以取消冒泡
  3. currentTarget ： 当前事件程序正在处理的元素, 和this一样的;
  4. defaultPrevented： false ，如果调用了preventDefualt这个就为真了;
  5. detail： 与事件有关的信息(滚动事件等等)
  6. eventPhase： 值为1表示处于捕获阶段， 值为2表示处于目标阶段，值为3表示在冒泡阶段
  7. target || srcElement： 事件的目标
  8. trusted： 为ture是浏览器生成的，为false是开发人员创建的（DOM3）
  9. type ： 事件的类型 view ： 与元素关联的window， 我们可能跨iframe；
  10. preventDefault() 取消默认事件；
  11. stopPropagation() 取消冒泡或者捕获；
  12. stopImmediatePropagation() (DOM3)阻止任何事件的运行； stopImmediatePropagation阻止绑定在事件触发元素的 其他同类事件的callback的运行 IE下的事件对象是在window下的，而标准应该作为一个参数, 传为函数第一个参数; IE的事件对象定义的属性跟标准的不同，如： cancelBubble 默认为false, 如果为true就是取消事件冒泡; returnValue 默认是true，如果为false就取消默认事件; srcElement, 这个指的是target, Firefox下的也是srcElement;