event listener

假設你想在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 } // 處理點擊事件 })

如何在盡可能早的時間點運行 JavaScript，而不是更早地運行？ 您可以通過對 document 對象添加 DOMContentLoaded 事件的監聽器來實現： document.addEventListener('DOMContentLoaded', (event) => { // 事件發生時執行的代碼 }) 我通常不在事件回調中使用箭頭函數，因為無法訪問 this。 但在這種情況下，我們不需要 this，因為它始終是 document。在任何其他事件監聽器中，我都會使用常規函數： document.addEventListener('DOMContentLoaded', function(event) { // 事件發生時執行的代碼 }) 例如，如果我在一個循環中添加事件監聽器，且不確定事件觸發時 this 將會是什麼。