DOM事件机制的两个阶段
捕获阶段：（从外向内监听函数）
- 当用户点击按钮，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。
冒泡阶段：（从内向外监听函数）
- 浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。
浏览器调用顺序
首先按照从外向内的捕获顺序看有没有函数监听，然后按照从内向外的冒泡顺序看有没有函数监听。
事件绑定API
W3C规定，使用addEventListener监听事件时，addEventListener('click', fn, bool)，如果第三个参数bool 不传，或者传false, 在冒泡阶段调用fn，如果第三个参数Bool传值为true, 那么我们会在捕获阶段调用fn。
阻止传播
用e.propagation()来阻止捕获/冒泡
e.target 和 e.currentTarget的区别
- e.target 用户正在操作的元素，随着用户
- e.currentTarget 设置在监听的元素 用户实际点击的是span中的文字，选择监听的是li元素时：
<ul>
<li>
<span>文字</span>
</li>
</ul>
e.target就是span标签，e.currentTarget就是li标签
事件委托
由于冒泡阶段，浏览器从用户点击的内容从下往上遍历至 window，逐个触发事件处理函数，因此可以监听一个祖先节点(例如爸爸节点、爷爷节点)来同时处理多个子节点的事件
举例一
我们要给100个按钮添加点击事件，怎么办？
- 最笨的办法：直接给100个按钮逐个addEventListener。
- 采用事件委托：监听这100个按钮的爸爸，等冒泡的时候，判断target是不是这100个按钮中的一个。
举例二
我们要监听目前不存在的元素的点击事件，咋办？
- 采用事件委托：监听祖先，等到冒泡时，判断点击的元素是不是我想要监听的元素。
因此，使用事件委托的好处就是：
- 可以省掉监听数，从而节省内存
- 可以监听动态元素
