DOM0 级事件模型

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

// 方式一
// 将事件直接通过属性绑定在元素上


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

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

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

IE 事件模型

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

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

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

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

参数说明：

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

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

DOM2 级事件模型

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

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

事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行
事件处理阶段：事件在达到目标元素时，触发监听事件
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行
相对于 IE 事件模型，多了事件捕获阶段，我们可以在其 api 中设置是在事件捕获阶段还是冒泡阶段再触发监听事件