JS事件模型

---

1. DOM0级事件模型

又称为原始事件模型，在该模型中，事件不会传播，即没有事件流的概念。事件绑定监听函数比较简单, 有两种方式:

• html中直接绑定，如

<button onClick="handleClick">点击</button>

• 通过js代码绑定事件，如

let btn = document.getElementById("id");
btn.onclick = () => {
...
}

移除事件：

btn.onclick = null;

这种事件模型的优点是不存在兼容问题，所有浏览器都支持。

2. IE事件模型

IE的事件模型分为两个过程：

1. 事件处理阶段
   事件到达目标元素, 触发目标元素的监听函数。
2. 事件冒泡阶段
   件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

事件绑定监听函数的方式：

attachEvent(eventType, handler);

事件移除：

deleteEvent(eventType, handler);

• eventType指定事件类型(注意加on)
• handler是事件处理函数

3. DOM2级模型

属于W3C标准模型，现代浏览器(除IE6-8之外的浏览器)都支持该模型。在该事件模型中，一次事件共有三个过程:

• 事件捕获阶段(capturing)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
• 事件处理阶段(target)。事件到达目标元素, 触发目标元素的监听函数。
• 事件冒泡阶段(bubbling)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

事件绑定监听函数的方式:

addEventListener(eventType, handler, useCapture)；

事件移除监听函数的方式如下:

removeEventListener(eventType, handler, useCapture)；

• eventType指定事件类型(不要加on)
• handler是事件处理函数
• useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致。

4. 事件对象

当一个事件被触发时，会创建一个事件对象(Event Object), 这个对象里面包含了与该事件相关的属性或者方法。该对象会作为第一个参数传递给监听函数。

DOM事件模型中的事件对象常用属性:

• type用于获取事件类型
• target获取事件目标
• stopPropagation()阻止事件冒泡
• preventDefault()阻止事件默认行为

IE事件模型中的事件对象常用属性:

• type用于获取事件类
• srcElement获取事件目标
• cancelBubble阻止事件冒泡
• returnValue阻止事件默认行为

5. 事件代理（事件委托）

事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理(Event delegation)。

为了兼容考虑，大多数情况下都是将事件监听器添加到事件流的 冒泡阶段