前端面试题——事件模型

【本篇内容较为简短，没有很多代码，速读只需一两分钟】

目前共有三种事件模型，它们分别是：

DOM0 级事件模型、IE 事件模型、DOM2 级事件模型

DOM0 级事件模型

又称原始事件模型，有两种方式，最直观的提下如下代码：

// 方式一
// 将事件直接通过属性绑定在元素上
<button onclick="clickBtn()"></button>

// 方式二
// 获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件
// 取消该事件可直接设置为 null
var btn = document.getElementById('btn')
btn.onclick = function () {...}
btn.onclick = null

DOM0 级的事件模型没有事件流，方法较为简单，但是将逻辑和界面耦合在了一起，对之后的维护不是很友好

但也不是没有优点，这种方式兼容所有浏览器

IE 事件模型

IE 事件模型一共有两个阶段：

1. 事件处理阶段：事件在达到目标元素时，触发监听事件
2. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

绑定和移除事件的 api 分别如下：

// 绑定事件
el.attachEvent(eventType, handler)

// 移除事件
el.detachEvent(eventType, handler)

参数说明：

eventType 是如onclick一样的带有”on“的事件，绑定事件时，handler可以是具名函数，也可以是匿名函数，但是匿名函数无法移除

我们会发现，IE 事件模型与我们平时用的事件绑定方法addEventListener，也就是下面要说的 DOM2 级事件模型有点相似，但是 IE 事件模型仅在 IE 浏览器中有效，不兼容其他浏览器

DOM2 级事件模型

W3C标准模型，也是我们频繁使用的事件模型，除 IE6-8 以外的所有现代浏览器都支持该事件模型

DOM2 级事件模型共有三个阶段：

1. 事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行
2. 事件处理阶段：事件在达到目标元素时，触发监听事件
3. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

相对于 IE 事件模型，多了事件捕获阶段，我们可以在其 api 中设置是在事件捕获阶段还是冒泡阶段再触发监听事件

至于其 api，小伙伴们可以看之前的两篇文章：

事件代理 delegate 的实现（一）
事件代理 delegate 的实现（二）

嗯，这次的内容很简单，所以也不好意思骗赞骗关注了。谢谢大家的阅读，如有错误还望指正！

扫码关注前端周记公众号