事件机制

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

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

 

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

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

 

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

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

　　1:事件捕获阶段

　　2:目标阶段

　　3:冒泡阶段

// html
<div id="a">
    <div id="b">
    </div>
  </div>
// 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()