JS 事件捕獲與事件冒泡
阿新 • • 發佈：2022-02-23
事件捕獲與事件冒泡
<script> function showTagName() { alert("事件捕獲: " + this.tagName); } var elems = document.querySelectorAll("div, p, a"); for (let elem of elems) { //addEventListener(event, function, useCapture); //useCapture ：false冒泡（預設）， true捕獲 elem.addEventListener("click", showTagName, true); } </script> <body> <div id="wrap"> <p class="hint"> <a href="#"></a> </p> </div> </body> 點選a時, 同時觸發p div 冒泡 觸發事件順序 a -> p -> div 捕獲 觸發事件順序 div -> p -> a
阻止事件捕獲和冒泡
1 event.stopPropagation(); [ˌprɒpəˈɡeɪʃən] 傳遞
會阻止事件捕獲和事件冒泡，但是無法阻止標籤的預設行為，例如點選連結任然可以開啟對應網頁。
function showAlert(event) { alert("您點選了 "+ this.tagName + " 標籤"); //阻止事件捕獲和冒泡 event.stopPropagation(); } var elems = document.querySelectorAll("div, p, a"); for(let elem of elems) { elem.addEventListener("click", showAlert); }
2 event.stopImmediatePropagation() [ i mi: diət] 立刻的,之後的
阻止同一節點的同一事件的其它事件處理程式，例如為某個節點定義了多個點選事件，當事件觸發時，這些事件會按定義順序依次執行，如果其中一個事件處理程式中使用了 stopImmediatePropagation() 方法，那麼剩下的事件處理程式將不再執行。
function sayHi(event) { alert("事件處理程式 1"); event.stopImmediatePropagation(); } function sayHello() { alert("事件處理程式 2"); } // 為 id 為 link 的標籤定義多個點選事件 var link = document.getElementById("link"); link.addEventListener("click", sayHi);//阻止下面的點選事件sayHello link.addEventListener("click", sayHello);
3 event.preventDefault();
阻止預設操作, 某些事件具有與之關聯的預設操作，例如當您單擊某個連結時，會自動跳轉到指定的頁面
var link = document.getElementById("link");
link.addEventListener('click', function(event){
event.preventDefault(); // 阻止連結跳轉
});