事件机制

事件流(Event Flow)指的就是「网页元素接收事件的顺序」。事件流可以分成两种机制：

• 事件捕获(Event Capturing)
• 事件冒泡(Event Bubbling)

当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
2. 目标阶段：真正的目标节点正在处理事件的阶段；
3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

Event.eventPhase 表示事件流当前处于哪一个阶段

　　0:目前没有事件正在被处理

　　1:事件捕获阶段

　　2:目标阶段

　　3:冒泡阶段

// html

    

    
  

// js

 a.addEventListener('click',function(e){       console.log('a clicked',e.eventPhase);     })  b.addEventListener('click',function(e){       console.log('b clicked',e.eventPhase);     })
// 点击b输出
b clicked 2 a clicked 3
// 点击a a clicked 2 // addEventListener的第三个参数传入true，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发  a.addEventListener('click',function(e){       console.log('a clicked',e.eventPhase);     },true)  b.addEventListener('click',function(e){       console.log('b clicked',e.eventPhase);     },true) // 点击b输出 a clicked 1
b clicked 2 //点击a a clicked 2   // 阻止事件冒泡 event.stopPropagation() // 方法阻止监听同一事件的其他事件监听器被调用
event.stopImmediatePropagation()