event bubbling

了解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對象，再次調用事件處理程序（冒泡階段）。

假設你想在JavaScript中為多個元素添加事件監聽器，該如何實現呢？ 在JavaScript中，你可以使用以下語法為單個元素添加事件監聽器： document.querySelector('.my-element').addEventListener('click', event => { // 處理點擊事件 }) 但是，如果你想將相同的事件附加到多個元素上，該怎麼辦呢？ 也就是說，如何同時在多個元素上調用addEventListener()？ 你可以通過2種方式實現這一目標。一種是使用循環，另一種是使用事件冒泡。 使用循環 循環概念上是最簡單的。 你可以使用querySelectorAll()獲取具有特定類名的所有元素，然後使用forEach()對它們進行迭代： document.querySelectorAll('.some-class').forEach(item => { item.addEventListener('click', event => { // 處理點擊事件 }) }) 如果你的元素沒有共同的類名，你可以即時構建一個數組： [document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => { item.addEventListener('click', event => { // 處理點擊事件 }) }) 使用事件冒泡 另一個選項是依賴於事件冒泡，並將事件監聽器附加到body元素上。 事件總是由最特定的元素來處理，因此你可以立即檢查是否是應該處理事件的元素之一： const element1 = document.querySelector('.a-class') const element2 = document.querySelector('.another-class') body.addEventListener('click', event => { if (event.target !== element1 && event.target !== element2) { return } // 處理點擊事件 })