Как добавить прослушиватель событий к нескольким элементам в JavaScript

Допустим, вы хотите добавить прослушиватель событий к нескольким элементам в JavaScript. Как это сделать?

В JavaScript вы добавляетеслушатель событийк одному элементу с использованием этого синтаксиса:

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

Но как связать одно и то же событие с несколькими элементами?

Другими словами, как позвонитьaddEventListener()на нескольких элементах одновременно?

Сделать это можно двумя способами. Один используетпетля, другой используетвсплытие событий.

Использование петли

Цикл концептуально самый простой.

Вы можете позвонить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: