La delegación de eventos es una estrategia de optimización muy útil para simplificar el código y mejorar el rendimiento de un sitio web, sobre todo en el caso de que necesite muchos listeners de eventos.
¿Qué es la delegación de eventos?
Imaginemos un caso donde tenemos 50 botones en una página. Si cada uno de ellos debe tener actividad al hacer click, tendríamos que estar gestionando 50 .addEventListener() para cada botón.
La delegación de eventos nos permite simplificar esta tarea, y en lugar de escuchar cada botón con 50 listeners diferentes, lo que vamos a hacer es escuchar con un sólo listener en el elemento padre, y detectar que elemento hijo ha pulsado, aprovechando la propagación de eventos, donde los elementos burbujean hacia los elementos padres.
Uso de la delegación de eventos
Para entender como se aplica esta teoría al código, vamos a realizar el ejemplo propuesto en el texto anterior, primero sin utilizar delegación de eventos y luego utilizándola.
Veamos un ejemplo sin utilizar delegación de eventos:
<div class="parent">
<button>Botón 1</button>
...
<button>Botón 50</button>
</div>
<script>
const buttons = document.querySelectorAll("button"); // 50 buttons
buttons.forEach(button => {
button.addEventListener("click", () => {
alert(`Hola, soy el botón "${button.textContent}"`);
});
});
</script>
En este caso, hemos creado un bucle que recorre los 50 botones y añade un listener a cada uno de ellos.
Veamos ahora un ejemplo utilizando delegación de eventos:
<div class="parent">
<button>Botón 1</button>
...
<button>Botón 50</button>
</div>
<script>
const parent = document.querySelector(".parent"); // Padre de los botones
parent.addEventListener("click", ({ target }) => {
const isButton = target.tagName === "BUTTON";
if (isButton) {
alert(`Hola, soy el botón "${target.textContent}"`);
}
});
</script>
Analicemos este código:
- 1️⃣ En primer lugar, escuchamos el evento en el padre, no en cada botón.
- 2️⃣ Desestructuramos
targetque es el elemento donde salta el evento. - 3️⃣ Comprobamos si el elemento es un botón. Se podría hacer con clases, con id o como prefieras.
- 4️⃣ Si lo es, hacemos lo mismo que en el caso anterior.
Es importante tener en cuenta que la delegación de eventos sólo funcionará cuando el evento en cuestión tenga activada la propagación de eventos y burbujee hacia los elementos padres hasta llegar al raíz del documento.
