具体有很多的细节，网址在https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
react 的合成时间之前我也写过，翻翻博客就能看到。
Syntax
// 仔细看，这个东西有三个参数
target.addEventListener(type, listener [, options]);
// useCapture 捕获 还是冒泡
target.addEventListener(type, listener [, useCapture]);
parameters
-
type
具体有哪些类型到这里去看：https://developer.mozilla.org/en-US/docs/Web/Events
-
listener
具体有哪些 listener 可以到这里去看：https://developer.mozilla.org/en-US/docs/Web/API/EventListener
对于我们开发者来说，我们不知道的或者忽略了的是：
listener 是可以传一个对象的，比如说
document.body.addEventListener("click", { handleEvent: function() {console.log("!!!")}})这样的好处是，我们点一个 click 可以触发很多的 event
-
options
- capture true 就是捕获 false 就是冒泡
- once 执行一次
- passive 用了 passive 就是说不会 preventDefault，也就是说声明了，这个东西不会阻止默认的事件。紧接着呢，我们可以放心的用于异步。passive 对于性能是有很大的提升的。比如 scroll、touchMove 这种高频的事件，把它换成 passive。
capture
捕获还是冒泡。
捕获和冒泡自己之前都是死记硬背，现在有了新的思路。我们来看看下面的 event.html
<div id="a" style=" 100%;height: 300px; background: blue">
<div id="b" style=" 100%;height: 200px; background: pink">
</div>
</div>
写完 HTML，上 JS
// 获取 DOM 节点
var a = document.getElementById('a');
var b = document.getElementById('b');
我们想象一下，假如你是一个浏览器的实现者，假如你的鼠标点了一个点的时候，你第一个收到的信息是什么？
x, y 相对于 viewport
有了 x，y，你是如何知道你点了哪个元素的？？？
元素位置与坐标比较，和 box tree 去比较？？？
答案是层级从上到下，肯定是先跟最外层的 root 元素去比，然后一层一层 从外往里面找，这就是一个捕获的过程。捕获了以后，如何让父级元素知道已经捕获了呢？这个时候就是从里往外的冒泡传递。
捕获和冒泡是谁先呢？？？肯定是捕获呀，都从 root 节点找着来。同一个元素，捕获先，冒泡后。
所以，很简单。捕获过程和冒泡过程的区分。
捕获
// 加入了 true，就成了一个捕获型的事件
a.addEventListener("click", () => {console.log("a1")}, true)
b.addEventListener("click", () => {console.log("b1")}, true)
// 输出结果，a1 b1
冒泡
// 加入了 false，就成了一个冒泡型的事件
a.addEventListener("click", () => {console.log("a2")}, false)
b.addEventListener("click", () => {console.log("b2")}, false)
// 输出结果，b2 a2