Cómo agregar un detector de eventos a múltiples elementos en JavaScript

Supongamos que desea agregar un detector de eventos a varios elementos en JavaScript. ¿Cómo puedes hacerlo?

En JavaScript, agrega unoyente de eventosa un solo elemento usando esta sintaxis:

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

Pero, ¿cómo se puede adjuntar el mismo evento a varios elementos?

En otras palabras, cómo llamaraddEventListener()en varios elementos al mismo tiempo?

Puede hacer esto de 2 formas. Uno está usando unlazo, el otro está usandoevento burbujeante.

Usando un bucle

El bucle es el más simple desde el punto de vista conceptual.

Puedes llamarquerySelectorAll()en todos los elementos con una clase específica, luego useforEach()para iterar sobre ellos:

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

Si no tiene una clase común para sus elementos, puede construir una matriz sobre la marcha:

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

Utilizando el burbujeo de eventos

Otra opción es confiar enevento burbujeantey adjunte el detector de eventos en elbodyelemento.

El evento siempre es administrado por el elemento más específico, por lo que puede verificar inmediatamente si ese es uno de los elementos que debe manejar el evento:

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 }


Más tutoriales de js: