# 事件流

事件机制【事件原理】包括：事件捕获，事件目标，事件冒泡。

一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段：

1. 捕获阶段：从 window 对象传导到目标节点（从外到里），这个阶段不会 响应任何事件
2. 目标阶段：在目标节点上触发
3. 冒泡阶段：从目标节 点传导回 window 对象（从里到外）

事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层

一般来说事件机制W3C标准先触发事件捕获 -> 目标事件 -> 事件冒泡。 IE中先触发事件冒泡 -> 目标事件 -> 事件捕获。 这个过程又叫做事件的传播。

虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。

# 阻止事件

• 阻止事件冒泡：

  • W3C 中使用event.stopPropagation()；
  • IE 中使用cancelBubble = true;

• 阻止事件捕获：

  • W3C 中使用event.preventDefault()；
  • IE 中使用window.event.returnValue = false

# 事件代理 【事件委托】

JS 高程上讲：事件委托就是利用事件冒泡，只制定一个事件处理程序， 就可以管理某一类型的所有事件。

事件委托称事件代理【事件委托叫法不同或者说主体不同 - addEventListener】，是 js 中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务

事件委托的原理是DOM 元素的事件冒泡。

如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获
// addEventListener默认第三个参数是false也就是在冒泡阶段触发。

node.addEventListener('click',(event) =>{
    console.log('冒泡')
},false); // false 冒泡

node.addEventListener('click',(event) =>{
    console.log('捕获 ')
},true)   // true 捕获