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

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

En JavaScript, agregue un detector de eventos a un solo elemento utilizando esta sintaxis:

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

Pero ¿cómo puedes asociar el mismo evento a múltiples elementos?

En otras palabras ¿cómo invocar addEventListener()múltiples elementos al mismo tiempo?

Puedes hacer esto de dos maneras: una es mediante un bucle y la otra es mediante el envío de eventos .

Usando un bucle

El bucle es el más simple conceptualmente.

Puedes llamar querySelectorAll()a todos los elementos con una clase específica y luego usar forEach()para iterarlos:

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

Si no tienes una clase común para tus elementos, puedes construir una matriz sobre la marcha:

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

Uso de burbujeo en eventos

Otra opción es confiar en el burbujeo de eventos y adjuntar el detector de eventos al bodyelemento.

El evento siempre lo gestiona el elemento más específico, por lo que puedes comprobar inmediatamente si ese es uno de los elementos que debería gestionar 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}

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

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

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

programar

es

2025-01-20

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente