Delegación de eventos en JavaScript

Un solo listener en el contenedor atiende a cada hijo, presentes y futuros.

function wire(container, onPick) {
  const controller = new AbortController();

  container.addEventListener("click", (event) => {
    const row = event.target.closest("[data-idx]");
    if (!row || !container.contains(row)) return;
    event.preventDefault();
    onPick(Number(row.dataset.idx));
  }, { signal: controller.signal });

  container.addEventListener("keydown", (event) => {
    if (event.key === "Escape") controller.abort();
  }, { once: true });

  return () => controller.abort();
}

Cómo funciona

event.target.closest encuentra la fila que recibió el clic.
La delegación sobrevive a nodos agregados después del listener.
{ once: true } y { signal } controlan la vida del listener.

Palabras clave y builtins usados aquí

Number
const
function
if
return

El intento, en números

Líneas: 16
Caracteres a escribir: 468
Tokens: 128
Ritmo de tres estrellas: 100 tpm

Al ritmo de tres estrellas de 100 tokens por minuto, este intento toma unos 77 segundos.

Escribe este fragmento

Paso 2 de 3 en Eventos; paso 5 de 13 en El navegador.

← Anterior Siguiente →