如何在JavaScript中為多個元素添加事件監聽器

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

使用循環#

使用事件冒泡#

使用循環

使用事件冒泡