2

Slide: 1
"Algunos eventos pueden propagarse, es decir, viajar a través de diferentes elementos de la página o aplicación."
"¿Como un efecto dominó?"
button.addEventListener("click", function() { alert("¡Has hecho clic en el botón!");});
"¡Exacto! Si un evento ocurre en un elemento, puede afectar a otros elementos, como un clic en un botón que también dispara una acción en un contenedor padre."
Slide: 2
"En vez de asignar un listener a cada elemento, podemos delegar los eventos a un contenedor más grande. Esto se llama delegación de eventos."
"¿Por qué hacer eso?"
document.getElementById("container").addEventListener("click", function(event) { if (event.target.tagName === "BUTTON") { alert("¡Clic en un botón!"); } });
"Porque así optimizamos el rendimiento, especialmente si tenemos muchos elementos en la página. Solo necesitamos escuchar en el contenedor principal."
: "¿Entonces, cada botón tendrá su propio evento?"
Slide: 3
"Vamos a aplicar lo aprendido. Crearé un evento para cada botón."
"No, usaremos delegación de eventos. Un solo listener en el contenedor manejará todos los botones."

Over 40 Million Storyboards Created

No Downloads, No Credit Card, and No Login Needed to Try!