JS的事件流

什么是事件流：事件流描述的是从页面中接收事件的顺序，事件流包括下面几个阶段。

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

如何让事件先冒泡后捕获：

在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

addEventListener

addEventListener 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
addEventListener 事件目标可以是文档上的元素 Element、Document 和 Window 或者任何其他支持事件的对象（例如 XMLHttpRequest）。
语法：target.addEventListener(type, listener, options/useCapture)

1. type：表示监听事件类型的字符串
2. listener：所监听的事件触发，会接受一个事件通知对象。
3. options：一个指定有关 listener 属性的可选参数对象。可选值有 capture（事件捕获阶段传播到这里触发）、once（在 listener 添加之后最多值调用一次）、passive（设置为 true 时表示 listener 永远不会调用 preventDefault()）。
4. useCapture：在 DOM 树中，注册了 listener 的元素，是否要先于它下面的 EventTarget 调用该 listener。

说明：addEventListener 的第三个参数涉及到冒泡和捕获，为 true 时是捕获，为 false 时是冒泡。 或者是一个对象 { passive: true }，针对的是 Safari 浏览器，禁止/开启使用滚动的时候要用到