JavaScript事件冒泡機制原理例項解析
阿新 • • 發佈:2020-01-16
這篇文章主要介紹了JavaScript事件冒泡機制原理例項解析,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
DOM事件流(event flow )存在三個階段:事件捕獲階段、處於目標階段、事件冒泡階段,事件冒泡順序是由內到外進行事件傳播,事件冒泡是由IE開發團隊提出來的,即事件開始時由最具體的元素(文件中巢狀層次最深的那個節點)接收,然後逐級向上傳播。
聽了簡介介紹之後,您可能不理解,所以舉個例子:
<html> <head> <title>js事件冒泡測試</title> </head> <body> <div id='content' onclick='alert("content")'> <div id='div' onclick='alert("div");'> <ul onclick='alert("ul");'> <li onclick='alert("li");'>test</li> </ul> </div> </div> </body> </html>
點選test頁籤,會依次執行li的onclick、ul的onclick、div的onclick,content的onclick,從內到外執行,所以這個就是冒泡事件的簡單例子
最近也遇到了這種情況,所以就去網上搜索資料,簡單學習一下,就是點選一個按鈕的時候,竟然觸發了兩次,通過排查,發現了冒泡機制導致的,解決方法是禁用事件冒泡機制
w3c的方法是e.stopPropagation(),IE則是使用e.cancelBubble = true
$(element).click(function(e){ e.stopPropagation();//ie e.cancelBubble = true });
當然除了冒泡機制會導致onclick被呼叫兩次外,事件被繫結2次的情況也有可能,解決方法是解除事件,然後再繫結
$(element).unbind('click').click(function() { // todo })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。