 element.addEventListener(event, function, useCapture)
    capture 选项有两个可能的值：
    如果为 false（默认值），则在冒泡阶段设置处理程序。
    如果为 true，则在捕获阶段设置处理程序。

阻止事件冒泡

e.stopPropagation()  //阻止事件冒泡
e.preventDefault( )  //阻止默认事件

dom事件传播事件的三个阶段

W3C 中定义事件的发⽣经历三个阶段：捕获阶段（> capturing ）、⽬标阶段（> targetin）、冒泡阶段（ > bubbling）

捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
目标阶段（Target phase）—— 事件到达目标元素。
冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡
冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发
捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发
DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件
阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble =true
阻⽌捕获：阻⽌事件的默认⾏为，例如click - a后的跳转。在 W3c中，使⽤preventDefault() ⽅法，在 IE 下设置 window.event.returnValue = false
每个处理程序都可以访问 event 对象的属性：
- event.target —— 引发事件的层级最深的元素。
- event.currentTarget（=this）—— 处理事件的当前元素（具有处理程序的元素）
- event.eventPhase —— 当前阶段（capturing=1，target=2，bubbling=3）
  事件委托&事件代理
冒泡和捕获为“事件委托”奠定了基础 —— 一种非常强大的事件处理模式
比如有一百个li标签，需求点击某一个的时候弹出对应的编号
- 可以直接给父级标签绑定事件，在冒泡的时候去弹出对应的下标。
```
document.getElementById("ul").addEventListener(
   "click",
   function (e) {
       console.log(e);
       e.view.confirm(e.target.dataset.index)
   },
   false
);
```

JavaScript

事件冒泡&事件代理

阻止事件冒泡

dom事件传播事件的三个阶段

事件委托&事件代理