0
点赞
收藏
分享

微信扫一扫

阻止事件冒泡\事件捕获 [无废话版]

山竹山竹px 2022-01-31 阅读 61

(一) 前言

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()
document.getElementById("second").addEventListener("click",function(){
    alert("second");
    event.stopPropagation() 
},true);        
  • event.stopImmediatePropagation()
document.getElementById("second").addEventListener("click",function(){
    alert("second");
    event.stopImmediatePropagation();  
},true);        

stopImmediatePropagation() 和 stopPropagation()的区别

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

举报

相关推荐

0 条评论