事件冒泡和事件捕获区别及设置

最新推荐文章于 2025-04-19 12:49:59 发布

SpringRolls

最新推荐文章于 2025-04-19 12:49:59 发布

阅读量1.8k

点赞数 3

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/SpringRolls/article/details/114265172

版权

前端专栏收录该内容

56 篇文章

订阅专栏

事件冒泡：从下至上(是指子元素向父元素传递的过程)， bool=false冒泡(默认)

事件捕获：从上至下(是指父元素向子元素传递的过程)， bool=true 捕获一般不会用到

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果。

优点：1. 使用事件代理的方法少了遍历所有li节点的操作，性能上更加优化；
2. 针对新创建的元素，直接可以拥有事件，不用再重新绑定。
使用情景：
　　 •为DOM中的很多元素绑定相同事件；
　　 •为DOM中尚不存在的元素绑定事件；

例子：假设一个元素div，它有一个下级元素p。
<div>
　　<p id="button">元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

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

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

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

addEventListener方法
element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。

第三个参数是布尔值：

注意：addEventListener() 必须用 removeEventListener() 解除

在W3c中，使用 stopPropagation() 方法来阻止冒泡

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

使用DOM3级新增事件 stopImmediatePropagation() 方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。

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

stopImmediatePropagation() 和 stopPropagation()的区别

后者只会阻止冒泡或者是捕获。但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    var ul = document.getElementsByTagName("ul")[0];
    ul.addEventListener('click',function(e){
      console.log('e.target', e.target)   //被点击的li
      console.log('e.currentTarget', e.currentTarget)   //ul
      // e.target 指向触发事件监听的对象。
      // e.currentTarget 指向添加监听事件的对象。
      console.log('e.target.nodeName', e.target.nodeName)
      if (e.target && e.target.nodeName == "LI") {
        console.log("li被点击了");
      }
    })
  </script>
</body>
</html>