如何将事件侦听器添加到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 }

免费下载我的JavaScript初学者手册


更多js教程: