Delegación de eventos en el navegador mediante JavaScript

Una de mis cosas favoritas de jQuery es (¿era?) la delegación de eventos. En particular, el .on()método.

Seleccionamos un elemento DOM y luego lo usamos .on()para adjuntar un controlador de eventos que se ejecuta en un elemento secundario particular de ese elemento.

¿Por qué es útil esto? Porque si agrega elementos dinámicamente al DOM, un único detector de eventos registrado a través de .on()funcionará en todos los elementos secundarios, incluso aquellos que se agreguen al DOM después de que haya registrado el controlador de eventos.

Supongamos que tienes una tabla. Dentro de la tabla, tenemos un conjunto de filas y cada fila tiene un botón con un controlador de clic.

Registra un detector de eventos cuando se carga el DOM:

document.addEventListener('DOMContentLoaded', () = { const buttons = document.querySelectorAll('button') for (const button of buttons) { button.addEventListener(...) }})

Pero si agregamos una nueva fila a la tabla, también debemos recordar registrar un nuevo detector de eventos.

¿Cómo podemos replicar la misma funcionalidad usando JavaScript puro?

Creamos una onfunción que toma un selector de contenedor, un tipo de evento (una 'click'cadena, por ejemplo), una cadena de selector secundario, que coincidirá con los descendientes del selector de contenedor. En esta función, primero creamos un bucle y agregamos un detector de eventos a cada elemento que coincida con nuestro selector de contenedor (para que pueda aplicarse a más de un selector de contenedor).Te recomendamos Tostadora de pan

Luego, si el objetivo del evento coincide con nuestro selector secundario (tercer parámetro de la función), llamamos a la función de devolución de llamada pasada como cuarto parámetro, pasando el evento:

const on = (selector, eventType, childSelector, eventHandler) = { const elements = document.querySelectorAll(selector) for (element of elements) { element.addEventListener(eventType, eventOnElement = { if (eventOnElement.target.matches(childSelector)) { eventHandler(eventOnElement) } }) }}

Así es como podemos invocar esta función:

on('ul', 'click', '.module.complete', event = { const item = event.target //...your event handler})

Ahora, cuando hacemos clic en un elemento que coincide .module.completecon el ulselector, se ejecutará el código de la función que pasamos y podremos extraer la referencia del elemento en el que hicimos clic event.target.

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

Delegación de eventos en el navegador mediante JavaScript

Una de mis cosas favoritas de jQuery es (¿era?) la delegación de eventos. En particular, el .on()método.

programar

es

2025-01-10

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