事件冒泡和捕獲 - 像 5 歲一樣學習

來吧，「像五歲一樣學習」只是一個短語 - 我不是在這裡講一個玩具故事！但我保證，如果你從頭到尾仔細閱讀，一切都會有意義。

事件冒泡和捕獲是在 JavaScript 中觸發事件時事件如何透過 DOM（文檔物件模型）傳播（或傳播）的兩個階段。現在，這個說法需要澄清事件傳播的概念。

事件傳播

當某個元素（例如 div 內的按鈕）上發生事件時，該事件不僅發生在該按鈕上。事件在 DOM 中傳播的過程稱為事件傳播。這個過程分為兩個主要階段：

• 事件擷取（也稱為「trickling」）

• 事件冒泡

現在，我希望你明白了。讓我們透過範例來理解兩者。

事件冒泡

事件冒泡是指當某個元素上發生事件時，它會先觸發該元素的事件處理程序。然後，它在 DOM 樹中向上移動，觸發其父元素的事件處理程序，依此類推，直到到達文件或 DOM 樹的根。

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

範例說明：當您按一下按鈕時，「按鈕已按一下！」警報首先顯示，因為該事件是在按鈕上觸發的。之後，事件「冒泡」到父親 div，您會看到「Parent Div Clicked!」警報。這是因為事件從按鈕開始，然後上升到其父級 div。所以，這個傳播過程被稱為「事件冒泡」。

事件捕捉

事件捕獲是冒泡的逆過程。事件從網頁頂部（從文件開始）開始，向下移動到您與之互動的元素。這意味著父元素的事件處理程序將首先被觸發，並且事件將向下移動到您單擊或與之互動的子元素。

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

在這種情況下，當您點擊按鈕時，「Parent Div Clicked!」警報將首先顯示。然後，「按鈕被點擊！」之所以會顯示警報，是因為事件從文件層級開始，首先捕獲（滴流）到父 div，然後到達按鈕。

addEventListener第三個參數的值為true是捕獲階段的決定因素。

每個事件都會經歷 3 個階段

當然，每個事件都會經歷所有三個階段：

• 捕獲階段：事件從頂部（文件）開始，向下到達目標。

• 目標階段：事件到達您與之互動的元素（目標）。

• 冒泡階段：到達目標後，事件經由父元素向上冒泡。

所以，事件自然會經歷所有三個階段，但是 JavaScript 可以讓您控制事件監聽器將在哪個階段執行。

即使事件經歷所有三個階段，JavaScript 的事件監聽器預設附加到冒泡階段。這表示當您新增事件監聽器而不指定任何內容時，它只會在冒泡階段（在事件到達目標並開始向上移動之後）監聽事件。

當您傳遞 true 作為第三個參數時，您告訴 JavaScript 在捕獲階段 監聽事件（當它沿著 DOM 傳播時）。事件仍會經歷所有階段（捕獲、目標和冒泡），但監聽器將在事件到達目標元素之前的捕獲階段觸發。

使用 true 時事件是否從捕捉變成冒泡？不，事件總是透過捕捉和冒泡移動。當你傳遞 true 時，你並沒有阻止冒泡階段。您只是告訴聽眾在捕獲期間做出回應。事件將從捕獲到目標繼續，然後像往常一樣冒泡。

總結：

• 所有事件都會自然地經歷捕獲、目標和冒泡階段。

• 預設情況下，事件監聽器在冒泡階段工作（事件到達目標並向上移動後）。

• 當您傳遞 true 時，您將告訴事件偵聽器在捕獲階段 觸發（當事件向下傳播時）。

• 이벤트는 여전히 모든 단계(캡처, 타겟, 버블링)를 거치지만 어떤 단계에서 행동할지 결정하는 것은 청취자입니다.

以上是事件冒泡和捕獲 - 像 5 歲一樣學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！