Propagación y Delegación de Eventos Explicadas
Propagación de eventos
La propagación de eventos describe cómo un evento se desplaza a través del DOM después de ser activado, y consta de tres fases distintas: Captura, Objetivo y Burbujeo.
Fase de captura (Capture)
El evento comienza en la raíz del árbol DOM (window) y desciende hacia el elemento objetivo. Los escuchadores de eventos en esta fase interceptan el evento mientras se desplaza hacia abajo.
Fase objetivo
El evento alcanza el elemento objetivo (el elemento que activó el evento). Aquí se ejecutan los escuchadores de eventos adjuntos al propio elemento objetivo.
Fase de burbujeo (Bubble)
Después de alcanzar el elemento objetivo, el evento comienza a ascender por el árbol DOM hasta la raíz (window), burbujeando a través de los elementos padre. Esta es la fase más utilizada, permitiendo que los elementos padre reaccionen a eventos activados por elementos hijo.
index.html
index.css
index.js
El evento se propaga a través del DOM cuando se hace clic en el button. Primero, el evento se dispara en el button (fase de destino), luego burbujea hacia el div interno y finalmente al div externo (fase de burbujeo).
Delegación de eventos
La delegación de eventos es una técnica que aprovecha la propagación de eventos para gestionar eventos de elementos hijos utilizando un único escuchador de eventos en un elemento padre. En lugar de adjuntar escuchadores individuales a cada hijo, un elemento padre escucha los eventos que burbujean desde sus hijos. Este enfoque tiene dos ventajas principales:
- Rendimiento: Reducir la cantidad de escuchadores de eventos mejora el rendimiento, especialmente en situaciones donde los elementos se crean dinámicamente (por ejemplo, una lista que crece a medida que se agregan nuevos elementos);
- Mantenibilidad: La delegación de eventos simplifica el código, especialmente al trabajar con estructuras DOM grandes o contenido dinámico.
index.html
index.css
index.js
En lugar de agregar escuchas de clic a cada elemento button de forma individual, se añade un solo escucha al elemento padre div. El evento se propaga desde los elementos button hasta el div, donde es gestionado.
Enfoque incorrecto
Enfoque correcto
Ejemplo práctico: Gestión de listas dinámicas
La delegación de eventos es ideal para gestionar interacciones en listas o tablas que pueden crecer con el tiempo (por ejemplo, al agregar tareas a una lista de pendientes o productos a un carrito de compras). A medida que se agregan o eliminan elementos, el contenedor principal (como ul o table) gestiona todas las interacciones, evitando la necesidad de adjuntar o eliminar escuchas en cada elemento hijo.
index.html
index.css
index.js
1. ¿Qué es la propagación de eventos?
2. ¿En qué fase un evento asciende por el árbol DOM después de alcanzar su elemento objetivo?
3. ¿Por qué es útil la delegación de eventos, especialmente con contenido dinámico?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.22Propagación y Delegación de Eventos Explicadas
Desliza para mostrar el menú
Propagación de eventos
La propagación de eventos describe cómo un evento se desplaza a través del DOM después de ser activado, y consta de tres fases distintas: Captura, Objetivo y Burbujeo.
Fase de captura (Capture)
El evento comienza en la raíz del árbol DOM (window) y desciende hacia el elemento objetivo. Los escuchadores de eventos en esta fase interceptan el evento mientras se desplaza hacia abajo.
Fase objetivo
El evento alcanza el elemento objetivo (el elemento que activó el evento). Aquí se ejecutan los escuchadores de eventos adjuntos al propio elemento objetivo.
Fase de burbujeo (Bubble)
Después de alcanzar el elemento objetivo, el evento comienza a ascender por el árbol DOM hasta la raíz (window), burbujeando a través de los elementos padre. Esta es la fase más utilizada, permitiendo que los elementos padre reaccionen a eventos activados por elementos hijo.
index.html
index.css
index.js
El evento se propaga a través del DOM cuando se hace clic en el button. Primero, el evento se dispara en el button (fase de destino), luego burbujea hacia el div interno y finalmente al div externo (fase de burbujeo).
Delegación de eventos
La delegación de eventos es una técnica que aprovecha la propagación de eventos para gestionar eventos de elementos hijos utilizando un único escuchador de eventos en un elemento padre. En lugar de adjuntar escuchadores individuales a cada hijo, un elemento padre escucha los eventos que burbujean desde sus hijos. Este enfoque tiene dos ventajas principales:
- Rendimiento: Reducir la cantidad de escuchadores de eventos mejora el rendimiento, especialmente en situaciones donde los elementos se crean dinámicamente (por ejemplo, una lista que crece a medida que se agregan nuevos elementos);
- Mantenibilidad: La delegación de eventos simplifica el código, especialmente al trabajar con estructuras DOM grandes o contenido dinámico.
index.html
index.css
index.js
En lugar de agregar escuchas de clic a cada elemento button de forma individual, se añade un solo escucha al elemento padre div. El evento se propaga desde los elementos button hasta el div, donde es gestionado.
Enfoque incorrecto
Enfoque correcto
Ejemplo práctico: Gestión de listas dinámicas
La delegación de eventos es ideal para gestionar interacciones en listas o tablas que pueden crecer con el tiempo (por ejemplo, al agregar tareas a una lista de pendientes o productos a un carrito de compras). A medida que se agregan o eliminan elementos, el contenedor principal (como ul o table) gestiona todas las interacciones, evitando la necesidad de adjuntar o eliminar escuchas en cada elemento hijo.
index.html
index.css
index.js
1. ¿Qué es la propagación de eventos?
2. ¿En qué fase un evento asciende por el árbol DOM después de alcanzar su elemento objetivo?
3. ¿Por qué es útil la delegación de eventos, especialmente con contenido dinámico?
¡Gracias por tus comentarios!
