DOM事件架构(DOM Event Architecture)

一些概念

事件对象（Event Object）

用户触发的点击，滚动，输入等UI事件，或者自定义事件，在浏览器中都会被抽象为一个Event Object（事件对象），事件对象接口封装了事件类型（type）、目标对象（target），当前目标（curentTarget）等属性，也定义了stopPropagation、preventDefault等方法。

参考文档：https://dom.spec.whatwg.org/#...

事件目标（event target）

事件触发的源目标对象，对应事件对象中的target属性

当前事件目标（current event target）

当前执行函数的目标对象，对应事件对象中curentTarget属性，可能是事件目标。

事件派发和DOM事件流

触发一个事件之后，事件对象被派发给目标对象，派发之前，先计算传播路径propagation path，传播路径对应着文档的树结构，是一个事件目标及其所有祖先的有序列表。如下图所示，事件对象在传播过程中经过三个阶段：

1. 捕获阶段（Capture phase）
2. 目标阶段（Target phase）
3. 冒泡阶段（Bubbling phare）：不冒泡事件没有该阶段

事件对象在传播过程，执行当前事件目标对该事件对象在该阶段注册的监听，可以回调函数中通过stopPropagation方法停止事件对象的进一步传播，codepen例子

事件监听

事件目标通过addEventListener方法注册监听器

语法

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

options

listener的配置项：

• capture：Boolean，表示listener是否在捕获阶段触发
• once：Boolean，表示listener是否最多只被调用一次
• passive：Boolean，表示listener是否永远不会调用preventDefault方法，如果listener调用了，客户端将会忽略，并抛出一次客户端警告，该属性可以被用来优化滚动性能

useCapture
是否注册为捕获阶段的listener，默认为false

el.addEventListener('click', callback) // 默认冒泡阶段执行监听
el.addEventListener('click', callback, true) // 设置为捕获阶段执行监听
el.addEventListener('click', callback, { capture: false }) // 同上

自定义事件

在新的规范中，提供CustomEvent构造函数创建自定义事件，CustomEvent继承至Event，只是增加了detail属性

语法

event = new CustomEvent(typeArg, customEventInit);

typeArg

事件类型，如原生的`click`，`input`之类

customEventInit

事件初始化配置，可选字段：
- `detail`：可以通过该字段配置事件相关的数据，该字段可以在`listener`中获取
- `bubbles`：Boolean，表示该事件是否冒泡，默认不冒泡（chrome中）
- `cancelable`：Boolean，表示该事件是否可以被取消