生活随笔
收集整理的這篇文章主要介紹了
浏览器事件模型捕获、冒泡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
瀏覽器中有兩種事件模型，那就是捕獲和冒泡。
當div發生嵌套時，點擊其中一個div，所發生的事件并不會僅僅只針對被點擊的div，他會觸發自己父元素的事件。
如圖所示，執行順序從window向自己的為捕獲階段；反之為冒泡階段。執行過程總是先執行捕獲在執行冒泡。
例子如下。
<style>#parent{width: 500px;height:500px;background: red;margin:auto;}#son{width: 400px;height:400px;background: green;margin:auto;}#child{width: 300px;height:300px;background: yellow;margin:auto;}
</style><body><div id="parent">parent<div id="son">son<div id="child">child</div></div></div>
</body>
let parent = document.getElementById("parent");let son = document.getElementById("son");let child = document.getElementById("child");
window.addEventListener("click",function(){console.log("冒泡,window")
})
parent.addEventListener("click",function(){console.log("冒泡,parent")
})
son.addEventListener("click",function(){console.log("冒泡,son")
})
child.addEventListener("click",function(){console.log("冒泡,child")
})
child.addEventListener("click",function(){console.log("捕獲,child")
},true)
son.addEventListener("click",function(){console.log("捕獲,son")
},true)
parent.addEventListener("click",function(){console.log("捕獲,parent")
},true)
window.addEventListener("click",function(){console.log("捕獲,window")
},true)
輸出順序為
捕獲,window
捕獲,parent
捕獲,son
捕獲,child
冒泡,child
冒泡,son
冒泡,parent
冒泡,window
利用addEventListener去監聽元素的click事件，第三參數默認為false，就是監聽的冒泡階段的事件。true就是監聽捕獲階段的事件。
如果想阻止是事件流程就可以用
e.stopPropagation();
這個方法是用來阻止事件流程，包括捕獲階段和冒泡階段。
總結
以上是生活随笔為你收集整理的浏览器事件模型捕获、冒泡的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
