事件冒泡和事件捕獲

了解JavaScript中的事件冒泡和事件捕獲的工作原理

冒泡和捕獲是DOM事件用於傳播的兩種模型。

假設您的DOM結構如下：

<div id="container">
 <button>Click me</button>
</div>

您希望在用戶點擊“button”時進行跟踪，並且有兩個事件監聽器，一個在button上，另一個在#container上。

請記住，除非您停止事件的傳播（參見後面的內容），否則對子元素的點擊事件將始終傳播到其父元素。

這些事件監聽器將按照順序調用，並且該順序由事件的冒泡/捕獲模型決定。

冒泡意味著事件從被點擊的項目（子項）向上傳播到其所有父層樹，從最近的父層開始。

在我們的示例中，button上的處理程序將在#container上的處理程序之前觸發。

捕獲則相反：外部事件處理程序在更具體的處理程序（例如button上的處理程序）之前觸發。

默認情況下，所有事件都會冒泡。

您可以通過將第三個參數應用於addEventListener並將其設置為true來選擇採用事件捕獲：

document.getElementById('container').addEventListener(
 'click',
 () => {
 //window loaded
 },
 true
)

請注意，首先運行所有捕獲事件處理程序，然後運行所有冒泡事件處理程序。

順序遵循以下原則：DOM從Window對象開始，遍歷所有元素並尋找被點擊的項目。在此過程中，調用與事件關聯的任何事件處理程序（捕獲階段）。

一旦到達目標，它然後從父層樹重複此過程，直到Window對象，再次調用事件處理程序（冒泡階段）。