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

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

事件傳播

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

• 事件捕獲（也稱為“trickling”）

• 事件冒泡

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

事件冒泡

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

  Parent Div
  Click Me!

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

事件捕捉

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

  Parent Div
  Click Me!

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

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

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

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

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

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

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

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

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

監聽事件（當它沿著 DOM 傳播時）。事件仍然會經歷所有階段（捕獲、目標和冒泡），但監聽器將在事件到達目標元素之前的捕獲階段被觸發。

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

：

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

  。

• 預設情況下，事件監聽器在冒泡階段工作

  （事件到達目標並向上移動之後）。

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

  。

事件仍然會經歷所有階段（捕獲、目標和冒泡），但您的偵聽器決定在哪個階段執行操作。