[Day25] - Event Capture, Propagation, Bubbling and Once(JS30 x 鐵人 30 x MDN) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 25

Modern Web

JS30 x 鐵人30 x MDN doc系列第 25 篇

[Day25] - Event Capture, Propagation, Bubbling and Once(JS30 x 鐵人 30 x MDN)

15th鐵人賽 javascript 30

yang817

團隊好想工作室 v7.0

2023-10-10 08:17:02

346 瀏覽

分享至

認識事件捕獲、冒泡、傳播、單次事件

事件介紹：Introduction to events
事件監聽器：EventTarget: addEventListener()
停止事件傳播：Event: stopPropagation() method - Web APIs | MDN

認識事件：在開始程式碼之前先來認識，事件模型涉及的重要概念：事件捕獲、事件冒泡和事件傳播：
1. 事件捕獲（Event Capturing）：
- 事件捕獲是事件處理的第一階段，它發生在事件到達實際目標元素之前。
- 在事件捕獲階段，事件從根元素（通常是document）開始，然後逐級向下傳播到目標元素。
- 在這個階段，可以註冊事件處理程序以捕獲事件(useCapture 於第三個參數帶入 true,預設為 false)，並且這些處理程序會按照元素層次結構的順序執行，從根元素到目標元素。
- 事件捕獲階段通常用得較少，而事件冒泡更常見。
1. 事件冒泡（Event Bubbling）：
- 事件冒泡是事件處理的第二階段，它發生在事件已經觸發了目標元素上之後。
- 在事件冒泡階段，事件從目標元素開始，然後逐級向上冒泡到根元素。
- 大多數情況下，事件冒泡是默認的行為，通常我們註冊的事件處理程序時，都在冒泡階段執行。
- 事件冒泡允許您在目標元素上觸發事件後，捕獲和處理該事件，並在父元素或更高層次的元素上進行進一步處理。
1. 事件傳播（Event Propagation）：
- 事件傳播是事件在 DOM 樹結構中傳播的過程，包括事件捕獲和事件冒泡階段。
- 在事件傳播過程中，事件在 DOM 樹的不同元素之間傳遞，直到到達目標元素並觸發事件處理程序。
- 事件傳播的過程使您可以捕獲事件的各個階段，並根據需要執行相應的處理。
總結來說，事件捕獲、事件冒泡和事件傳播是描述事件處理的不同階段和方式。事件捕獲從根元素向下捕獲事件，事件冒泡從目標元素向上冒泡事件，事件傳播包括這兩個階段，並提供了控制事件處理流程的靈活性。根據需求，您可以選擇在事件的不同階段進行處理，以實現不同的功能和互動。
接著我們來看程式碼

//  先取得作者設計好的三層div
const divs = document.querySelectorAll("div");

先寫一個觸發事件監聽器會執行的函式：會印出觸發的 class 名稱方便哪裡發生了事件

function handleClick(e) {
  console.log(this.classList.value);
}

將每個<div>都新增點擊事件監聽器

divs.forEach((div) => div.addEventListener("click", handleClick));

然後點擊下圖中橘色區塊，你會發現，如上面所述，通常我們註冊的事件處理程序都發生在冒泡階段，因此觸發事件監聽器的順序是three > two > one
接著我們在原本的事件監聽器後面帶入上第三個參數 useCapturetrue。

divs.forEach((div) => div.addEventListener("click", handleClick, true));

這時候一樣點擊橘色區塊，你會發現觸發事件監聽器的順序反過來了one > two > three顯然已經更改為捕獲階段觸發。
想當然爾也可以兩個階段都有事件監聽器，執行結果如何就留給各位嘗試囉！

divs.forEach((div) => div.addEventListener("click", handleClick, true));
divs.forEach((div) => div.addEventListener("click", handleClick));

其他選項：事件監聽器的第三個參數其實不只useCapture只是如果你單獨使用一個布林值那麼瀏覽器會很聰明地幫你認定為useCapture設定，其他可選用的設定還有capture（同第三個參數只帶一個true）、once、passive、signal都必須包在一個物件內使用

capture（捕獲階段）：如果設置為 true，事件將在捕獲被觸發。預設值為 false，表示事件在冒泡階段被觸發。
once（一次性監聽）：如果設置為 true，事件監聽器在觸發後自動刪除

以下範例為 capture 和 once 的結合

element.addEventListener("click", eventHandler, {
  capture: true,
  once: true,
});

passive（被動監聽）：如果設置為 true，告訴瀏覽器該事件不會調用preventDefault()，从而可以进行一些性能优化。这在滚动事件等高频事件中很有用。
signal（AbortController 的 signal）：允許使用 AbortController 信號來取消事件監聽器。這在某些情況下區要取消事件監聽器很有幫助。

const controller = new AbortController();
element.addEventListener("click", eventHandler, { signal: controller.signal });

// 取消事件監聽
controller.abort();

停止事件傳播：最後既然有事件傳播，那麼就有方法停止傳播，我只想要在觸發一次事件後阻止其他監聽器執行，那麼只要在 linstener 含式內寫下event.stopPropagation()即可。
```
function handleClick(e) {
  //  停止事件傳播
  e.stopPropagation();
  console.log(this.classList.value);
}
```

那麼今天就到這邊，大家還是要動手全部時做一次才會印象深刻哦！