Dom事件模型

Dom事件模型，是Dom事件规范的一种。

主要有：

1. DOM0 级事件处理程序 | DOM基本事件模型
2. DOM2 级事件处理程序
3. IE独有的事件模型
4. DOM3 级带伤处理程序

DOM0是Dom事件定义的原始阶段，也是最混乱的，但兼容性也是最高的。

DOM0

就是on的方式绑定事件，包括：

1. HTML 中 on

<button type="button" onclick="test()">点击</button>

2. JS中的on

document.getElementsByTagName("button")[0].onclick = function () {
	console.log(1);
};

Dom1级事件是没有定义的，所以没有。

DOM2

主要有：

1. addEventListener(eventType, listener[, useCapture])
2. removeEventListener(eventType, listener[, useCapture])

eventType ————> 事件名称，大小写敏感
listener ————> 监听函数
useCapture ————> 可选参数，默认false，表示监听函数只在冒泡阶段被触发。

DOM level 2模型属于W3C标准模型，现代浏览器都支持该模型。在该事件模型中，一次事件共有三个过程：

1. 事件捕获阶段（Capturing Phase）：事件从document一直向下传播到目标元素，依次检查经历过的节点是否绑定了事处监听函数（事件处理程序），如果有则执行，反之不执行

2. 事件处理阶段（Target Phase）：事件到达目标元素，触发目标元素的监听函数，这个是没有固有有的顺序之分的，按照添加的先后顺序执行

3. 事件冒泡阶段（Bubbling Phase）：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行，反之不执行。

IE事件模型

在IE事件模型中，需要使用attachEvent()和detachEvent()方法来触发事件和移除事件。在IE事件模型中，其有两个过程：

1. 事件处理阶段（Target Phase）：事件到达目标元素，触发目标元素的监听函数

2. 事件冒泡阶段（Bubbling Phase）：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行

这里没有指定 useCapture ，默认是 false，即捕获。

DOM3

DOM Level 3事件模型是DOM Level 2的事件模型的升级版，在DOM Level 2事件模型的基础上添加了更多的事件类型：

1. UI事件：当用户与页面上的元素交互时触发，如：load、scroll

2. 焦点事件：当元素获得或失去焦点时触发，如：blur、focus

3. 鼠标事件：当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

4. 滚轮事件：当使用鼠标滚轮或类似设备时触发，如：mousewheel

5. 文本事件：当在文档中输入文本时触发，如：input、change

6. 键盘事件：当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

7. 合成事件：当为IME（输入法编辑器）输入字符时触发，如：compositionstart

8. 变动事件：当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。在自定义事件称之为自定义事件模型。