DOM 是文档对象模型，将 HTML、XHTML、XML映射成树型结构，每个节点都是对象，Document 是根节点，因此 JavaScript 可以通过 DOM 操作 HTML 元素。冒泡事件是监听函数从内到外，捕获事件是监听函数从外到内。
- DOM Level2模型 W3C支持的是标准模型 DOM Level2模型，结合了两个事件流，事件一开始从根节点流向目标对象（捕获事件），然后在目标对象上被触发，之后再回溯到根节点（冒泡事件）。
如图所示：
- IE事件模型 IE 支持的事件流有两个阶段一是事件处理阶段，二是冒泡阶段，冒泡事件会从目标元素开始往根节点冒泡。简单来说，事件冒泡就是你向水里扔一块小小的石头，它在水的中央溅起一圈圈涟漪, 那波浪没抵达岸边就已消逝；这个过程就像事件冒泡，从事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
冒泡事件点击 div 后触发的顺序是 div->body->html->document->window,从目标节点向上传播。
ps：而如果是事件捕获，顺序会不同，window->document->html->body->div,事件捕获思想是不太具体的节点更应该接收到事件，具体的节点在最后接收到事件。事件捕获的用意，在事件预定目标之前就捕获它
- DOM Level3模型 DOM Level3模型在 DOM Level2 的基础升级，添加了很多事件类型模型，例如：
UI事件：当用户与页面上的元素交互时触发，如：load、scroll
焦点事件：当元素获得或失去焦点时触发，如：blur、focus
鼠标事件：当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件：当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 自定义模型
事件模型的实现从设计模式的角度来看，是一种观察者模式或者也叫发布订阅模式，订阅者订阅一个消息，发布者发布这个消息，订阅者收到消息，这是一种数据流动的方式。简单的自定义事件型型：
on()用于绑定事件，参数：事件名称，事件处理函数
emit()用于触发事件，参数：事件名称，传递给事件处理函数的参数
off 用于解除绑定的指定事件， 参数：事件名称，要解绑的事件函数
one 用于绑定一次性事件，只能触发一次，参数：事件名称，事件处理函数
参考：
