JS中的事件冒泡和事件捕獲

時間 2019-12-08

原文原文鏈接

事件捕獲階段：事件從最上一級標籤開始往下查找，直到捕獲到事件目標(target)。html

事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。函數

用圖示表示以下：測試

一、冒泡事件：spa

事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。通俗來說就是，就是當設定了多個div的嵌套時；即創建了父子關係，當父div與子div共同加入了onclick事件時，當觸發了子div的onclick事件後，子div進行相應的js操做，可是父div的onclick事件一樣會被觸發。 code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試事件冒泡</title>
    <style>
        div{padding:40px;}
        #div1{background: #00B83F;}
        #div2{background: #2a6496}
        #div3{background: #93C3CF}
    </style>
    <script>
    window.onload=function (){
        var odiv1=document.getElementById("div1");
        var odiv2=document.getElementById("div2");
        var odiv3=document.getElementById("div3");

        function fdiv1(){
            alert("div1");
        }
        function fdiv2(){
            alert("div2");
        }
        function fdiv3(ev){ 
            alert("div3");
        }
        odiv1.onclick=fdiv1;
        odiv2.onclick=fdiv2;
        odiv3.onclick=fdiv3;
    }

    </script>

</head>
<body>
  <div id="div1">
      <div id="div2">
          <div id="div3"></div>
      </div>
  </div>
</body>
</html>

測試結果:點擊div3時，依次彈出div3,div2,div1htm

2.阻止事件冒泡：對象

給div3的綁定事件改成。ev.canceBubble=true;blog

  function fdiv3(ev){
            var en=ev || event;
            en.cancelBubble=true;
            alert("div3");
        }

測試結果：點擊div3時，只彈出div3事件

三、事件捕獲：ip

從頂層元素到目標元素或者從目標元素到頂層元素，和事件冒泡是一個相反的過程。事件從最不精確的對象(document 對象)開始觸發，而後到最精確(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)。

代碼更改以下：

<script>
    window.onload=function (){
        var odiv1=document.getElementById("div1");
        var odiv2=document.getElementById("div2");
        var odiv3=document.getElementById("div3");
 
        odiv1.addEventListener("click",function(){
            alert("div1");
        },true);
        odiv2.addEventListener("click",function(){
            alert("div2");
        },true);
        odiv3.addEventListener("click",function(){
            alert("div3");
        },true);
    }
</script>