La propagación de eventos es un concepto fundamental en JavaScript que define cómo los eventos se propagan a través del Document Object Model (DOM). Comprender cómo se propagan los eventos es crucial para manejar eficazmente la interacción del usuario y la delegación de eventos. En este capítulo, exploraremos la propagación de eventos, incluyendo la fase de bubbling y cómo se puede controlar.

¿Qué es la Propagación de Eventos?

Cuando un evento se produce en un elemento del DOM, no se queda allí. En lugar de eso, el evento pasa (o “propaga”) a través de una serie de etapas desde el elemento que lo originó hacia sus elementos ancestros. Existen tres fases principales de la propagación de eventos:

1. Fase de captura (capturing phase): El evento se propaga desde el objeto Window hacia el objetivo del evento.
2. Fase de objetivo (target phase): El evento alcanza el elemento objetivo en el cual ocurrió.
3. Fase de bubbling (bubbling phase): El evento se propaga nuevamente hacia arriba desde el objetivo hacia el objeto Window.

Fase de Bubbling

La fase de bubbling es donde se suelen manejar la mayoría de los eventos. En esta fase, el evento se propaga desde el elemento objetivo hacia sus elementos ancestros, permitiendo que cada uno de ellos pueda responder al evento.

Ejemplo Básico:

html

En este ejemplo, al hacer clic en el botón, se disparan ambos alertas debido a que el evento hace bubbling desde el botón hasta el div contenedor.

Fase de Captura

La fase de captura permite interceptar eventos antes de que alcancen el elemento objetivo. Para utilizar esta fase, se pasa un tercer argumento (true) a addEventListener.

Ejemplo de Captura:

html

En este ejemplo, el alerta para el div contenedor se disparará antes que el del botón debido al uso de la fase de captura.

Detener la Propagación

En ciertos casos, puede ser necesario detener la propagación de un evento para que no alcance otros elementos ancestros. Esto se logra utilizando el método stopPropagation() en el objeto del evento.

Ejemplo:

html

Aquí, al hacer clic en el botón, solo se verá el alerta del botón, ya que stopPropagation() evita que el evento haga bubbling hasta el contenedor.

Stop Immediate Propagation

Para evitar que otros oyentes del mismo evento se ejecuten en el mismo elemento, puedes utilizar stopImmediatePropagation().

Ejemplo:

html

En este caso, solo se ejecutará el segundo alerta.

Placeholder para imagen

Conclusión

Comprender y manejar la propagación de eventos es esencial para controlar cómo y cuándo se manejan los eventos en una página web. La habilidad de detener y modificar la propagación de eventos te proporciona un control fino sobre la interacción del usuario y la funcionalidad del sitio web, permitiéndote crear experiencias de usuario más intuitivas y eficientes.