JavaScript Academy · Lección

Patrón de delegación de eventos

Gestione muchos eventos de elementos hijos desde un único listener del padre.

Patrón de delegación de eventos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Un listener para gobernarlos a todos

La delegación de eventos consiste en asociar un único listener a un ancestro común en lugar de asociar muchos listeners a cada elemento hijo. Como los eventos burbujean, el elemento padre recibe los clics de todos sus descendientes.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

El enfoque ingenuo

Sin delegación, tendría que recorrer cada elemento y asociarle un controlador. Es poco eficiente: consume más memoria y no funciona con los elementos que se añadan posteriormente.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

El enfoque delegado

En su lugar, asocie un único listener al elemento padre e inspeccione event.target para averiguar en qué elemento hijo se hizo clic.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Encontrar el destino correcto

El clic puede producirse sobre un elemento anidado. Use event.target.closest(selector) para recorrer hacia arriba y encontrar el ancestro relevante que coincida con su selector.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Proteger con una comprobación

Protéjase siempre contra los clics que no coincidan. La salida temprana if (!item) return; evita que el controlador falle cuando el usuario hace clic en el relleno o en un espacio del contenedor.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Usar atributos de datos

Un patrón habitual consiste en almacenar un id o una acción en cada elemento mediante un atributo data-*. El controlador delegado lo lee del elemento encontrado.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Despachar según la acción

Para barras de herramientas con muchos botones, asigne a cada uno un data-action y use una instrucción switch con ese valor. Un único listener gestiona todos los botones.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Por qué escala

Con la delegación, una lista de 1000 filas necesita un solo listener en lugar de 1000. Se usa menos memoria, la configuración es más rápida y no necesita un bucle de limpieza cuando cambian las filas.

Nota sobre el rendimiento

La delegación sí tiene un pequeño coste: cada evento que coincide ejecuta el controlador, que después lo filtra. En la mayoría de las aplicaciones, este coste es insignificante frente al ahorro, pero evite asociar listeners delegados a document para eventos de muy alta frecuencia, como mousemove.

Elegir el contenedor

Elija el ancestro estable más cercano que contenga todos los destinos. Delegar en un contenedor reducido (la propia lista) es mejor que delegar en document, porque menos eventos no relacionados activarán su controlador.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Combinar con closest

closest() es el núcleo de la delegación. Devuelve el propio elemento si coincide, el ancestro más cercano que coincida o null. Esto permite delegar de forma segura sobre marcado anidado.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Comprobación rápida

¿Por qué usar la delegación de eventos?

Resumen

La delegación de eventos asocia un único listener a un elemento padre y usa el burbujeo para gestionar todos sus hijos. Use e.target.closest(selector) para encontrar el elemento relevante, protéjase con un retorno temprano y lea los atributos data-* para despachar acciones. Este patrón escala a listas enormes y es el estándar para las interfaces dinámicas.

Preguntas frecuentes

¿La lección «Patrón de delegación de eventos» es gratis?

Sí — el texto completo de «Patrón de delegación de eventos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Patrón de delegación de eventos»?

Gestione muchos eventos de elementos hijos desde un único listener del padre. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Patrón de delegación de eventos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy