深入分析js的冒泡事件_基礎知識

javascript的dom操作做一定會遇到js的冒泡事件，最常見的是div彈窗事件如圖解

點擊灰色部分是彈跳窗消失，點擊黑色部分時沒有效果。

透過下面一段程式碼來分析js的冒泡事件

html代碼：

複製程式碼 程式碼如下:

   
   
   


   

       

js冒泡事件分析

       

---

       

           
                Click me !
           
       

   

    <script><br />     var box=document.querySelector(".box"),<br />     btn=document.querySelector(".btn");<br />     box.onclick=function(event){<br />         alert("我是div");<br />     }<br />     btn.onclick=function(event){<br />         alert("我是button");<br />     }<br />     </script>

使用firefox瀏覽器的預設開發者工具的3d視圖可以清楚的看出div層的先後順序

圖解：

點擊按鈕時會彈出「我是button」再彈出「我是div」,因為先觸發按鈕事件之後觸發下一層div點擊事件，

事件的觸發是先進先出原則。

圖解：

那麼有些時候我們並不想多個事件的觸發而導致衝突，所以event有stopPropagation();方法來阻止冒泡

還有一個event的方法也是比較常用的比如一個鏈接，點擊鏈接時我不想跳轉，則使用event.preventDefault();方法

實例程式碼如下

複製程式碼 程式碼如下:

   
   
   
頭>

   

       

js冒泡事件分析

       

---

       

           
                點我吧！
            按鈕>
            http://www.liteng.org" id="link">我是連結
       

   

   
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=函數（事件）{
        Alert("我是div");
    }
    btn.onclick=函數（事件）{
        Alert("我是按鈕");
        event.stopPropagation();
    }
    document.getElementById('link').onclick=function(event){
        Alert("我是連結");
        event.preventDefault();
    }
    /*區分event.stopPropagation();和event.preventDefault();
      先前使用stopPropagation()方法阻止冒泡事件
      近期是阻止預設的行為例如阻止超連結
    */
    腳本>
身體>

小夥伴們是否能夠全面理解js的冒泡事件了呢，有疑問就給我留言吧