一些概念

事件对象（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}) // 同上

自定义事件