Delegación de eventos en el navegador usando JavaScript vanilla

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

Seleccionamos unDOMelemento, y luego usamos.on()para adjuntar un controlador de eventos que se ejecuta en un hijo particular de ese elemento.

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

Suponga que tiene una mesa. 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 vanilla?

Creamos unonfunción que toma un selector de envoltura, un tipo de evento (un'click'cadena por ejemplo), una cadena de selección secundaria, que coincidirá con los descendientes del selector de envoltura. 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).

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.completebajo laulselector, se ejecutará el código de la función que pasamos, y podemos extraer la referencia del elemento en el que se hizo clic deevent.target.


Más tutoriales de js: