Как добавить прослушиватель событий к нескольким элементам в 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
}

Оригинал: “https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/”