事件冒泡與事件捕獲的作用與區別

本文轉載自查看原文 2020-09-03 14:01 1211

首先了解什么是冒泡事件與捕獲事件

冒泡事件：是指子元素向父元素傳遞的過程
捕獲事件：是指父元素向子元素傳遞的過程

<style> 
  div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #box1 {
    height: 150px;
    background-color: red;
   
  }
  #box2 {
    width: 80%;
    height: 100px;
    background-color: yellow;
  }
  #box3 {
    width: 80%;
    height: 50px;
    background-color: green;
  }
</style>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>
</body>
</html>
<script  type="text/javascript">
  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");
  var box3 = document.getElementById("box3");
  // addEventListener 事件默認為false，也就是我們所說的事件冒泡過程
  box1.addEventListener('click', function(){
    alert("box1 被觸發了");
  })

  box2.addEventListener('click', function(){
    alert("box2 被觸發了");
  })

  box3.addEventListener('click', function(){
    alert("box3 被觸發了");
  })

  // 點擊box3打印結果
  // box3 
  // box2
  // box1
  
  // 當我們將 addEventListener 設置為true時，此時就成了事件捕獲的過程
  box1.addEventListener('click', function(){
    alert("box1 被觸發了");
  }, true)

  box2.addEventListener('click', function(){
    alert("box2 被觸發了");
  }, true)

  box3.addEventListener('click', function(){
    alert("box3 被觸發了");
  })

  // 點擊box3打印結果
  // box1 
  // box2
  // box3

  // 阻止事件冒泡
  box1.addEventListener('click', function(){
    alert("box1 被觸發了");
  })

  box2.addEventListener('click', function(event){
    alert("box2 被觸發了");
    event.stopPropagation();
  })

  box3.addEventListener('click', function(){
    alert("box3 被觸發了");
  })

  // 點擊box3打印結果
  // box3
  // box2
  
  // 阻止事件捕獲
  box1.addEventListener('click', function(){
    alert("box1 被觸發了");
  }, true)

  box2.addEventListener('click', function(event){
    alert("box2 被觸發了");
    event.stopPropagation();
  }, true)

  box3.addEventListener('click', function(){
    alert("box3 被觸發了");
  })

  // 點擊box3打印結果
  // box1
  // box2

</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 簡述事件捕獲和事件冒泡的區別事件捕獲與事件冒泡事件冒泡和事件捕獲事件冒泡和事件捕獲事件，事件冒泡和事件捕獲 JS中綁定事件順序（事件冒泡與事件捕獲區別） Android 事件冒泡及捕獲事件捕獲和事件冒泡理解 JS事件冒泡與捕獲 JavaScript事件——冒泡、捕獲