[JavaScript知识库]阻止事件冒泡 |事件捕获 [无废话版]

(一) 前言

1.1 Dom 事件流

• 捕获阶段
• 处于目标阶段
• 冒泡阶段

DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

1.2 监听事件如何切换冒泡与捕获

改变 addEventListener 的第三个参数:接收布偶值,默认为 false

• true 为采用事件捕获

document.getElementById("third").addEventListener("click",function(){
   alert("third");
},true);

• false 为采用事件冒泡

document.getElementById("third").addEventListener("click",function(){
   alert("third");
});

(二) 阻止冒泡与捕获

下面的两个方法都能用来阻止事件冒泡与捕获

• event.stopPropagation()

stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段

document.getElementById("second").addEventListener("click",function(){
    alert("second");
    event.stopPropagation() 
},true);        

• event.stopImmediatePropagation()

Dom三级的新增事件方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。

document.getElementById("second").addEventListener("click",function(){
    alert("second");
    event.stopImmediatePropagation();  
},true);        

stopImmediatePropagation() 和 stopPropagation()的区别

后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。
例子点击这里
参考:JavaScript中捕获/阻止捕获、冒泡/阻止冒泡