如何在JavaScript中为多个元素添加一个事件监听器

假设你想在JavaScript中为多个元素添加一个事件监听器。你如何做到这一点？

在JavaScript中，你用这种语法给单个元素添加一个事件监听器。

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

但是，你怎么能把同一个事件附加到多个元素上呢？

换句话说，如何同时在多个元素上调用addEventListener() ？

你可以通过2种方式来实现。一种是使用循环，另一种是使用事件冒泡。

使用循环

循环是概念上最简单的一种。

你可以在所有具有特定类别的元素上调用querySelectorAll() ，然后使用forEach() 来迭代它们。

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

如果你的元素没有一个共同的类，你可以在空中建立一个数组。

[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

使用事件冒泡

另一个选择是依靠事件冒泡，将事件监听器附在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
  }
  //handle click
}