2022-08-14 同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/126338329

本文探讨了DOM事件的执行顺序，指出在同一元素上同时绑定的事件先执行捕获再执行冒泡，且每个事件都会执行一次。详细解释了事件冒泡自下而上和捕获自上而下的过程，并通过代码示例展示了同一元素上绑定多个事件的执行情况。最后介绍了事件委托的概念，如何通过将事件绑定在父元素上解决新插入子元素的事件绑定问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0.结论

执行顺序:先捕获再冒泡
执行次数:绑定了几个事件就执行几次
即:祖先元素的捕获事件>点击元素的捕获事件>点击元素的冒泡事件>祖先元素的冒泡事件

1.事件冒泡是自下而上执行

示例,略

2.事件捕获是自上而下执行

示例,略

3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #father{
      width: 200px;
      height: 150px;
      background: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #son{
      width: 100px;
      height: 50px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="father">
    <div id="son"></div>
  </div>
</body>
<script>
  var father=document.getElementById("father");
  var son=document.getElementById("son");
  father.addEventListener("click",fn1,false);//绑定父元素DOM2级冒泡事件
  father.addEventListener("click",fn2,true);//绑定父元素DOM2级捕获事件
  son.addEventListener("click",fn3,false);//绑定子元素DOM2级冒泡事件
  son.addEventListener("click",fn4,true);//绑定子元素DOM2级捕获事件
  function fn1(){
    console.log("fn1-父元素冒泡",this);
  }
  function fn2(){
    console.log("fn2-父元素捕获",this);
  }
  function fn3(){
    console.log("fn3-子元素冒泡",this);
  }
  function fn4(){
    console.log("fn4-子元素捕获",this);
  }
</script>
</html>

结果

点击子元素,输出结果:

fn2-父元素捕获 <div id="father">…</div> flex 
fn4-子元素捕获 <div id="son"></div>
fn3-子元素冒泡 <div id="son"></div>
fn1-父元素冒泡 <div id="father">…</div> flex

4.使用事件委托解决新插入的子标签没有绑定上事件的情况

li标签绑定点击事件

<body>
  <ul>
    <li>我是li标签1</li>
    <li>我是li标签2</li>
    <li>我是li标签3</li>
  </ul>
</body>
<script>
  var ul=document.querySelector("ul");
  var li=document.querySelectorAll("li");
  Array.from(li).forEach(v=>{
      v.addEventListener("click",function(){
      console.log(this.innerHTML);
    });
  });
</script>

往ul中追加新的li节点,发现其没有绑定上点击事件

  var newLi=document.createElement("li");
  newLi.innerHTML="我是li标签4";
  ul.appendChild(newLi);

使用事件委托:把点击事件绑定在ul上,从而捕获所有新增li节点

  var ul=document.querySelector("ul");
  var li=document.querySelectorAll("li");
  // 事件委托
  ul.addEventListener("click",function(event){
  	var event=event||window.event;
    var target=event.target;
    if(target.nodeName=="LI"){
      console.log(target.innerHTML);
    }
  });
  var newLi=document.createElement("li");
  newLi.innerHTML="我是li标签4";
  ul.appendChild(newLi);