El evento está en pleno auge.

La propagación de eventos es un tipo de propagación de eventos DOM ^{[ 1 ]} donde el evento se activa primero en el elemento objetivo más interno y luego se activa sucesivamente en los ancestros (padres) del elemento objetivo en la misma jerarquía de anidamiento hasta que llega al elemento DOM más externo o al objeto del documento ^{[ 2 ]} (siempre que el controlador esté inicializado). Es una forma en que se manejan los eventos en el navegador. Los eventos son acciones realizadas por el usuario, como hacer clic en un botón, cambiar un campo, etc. Los controladores de eventos se utilizan para ejecutar código cuando ocurre un tipo particular de evento de interfaz de usuario, como cuando se ha hecho clic en un botón o cuando una página web ha terminado de cargarse.

Consideremos la estructura DOM donde hay 3 elementos anidados en el siguiente orden: Elemento 1 (Div), Elemento 2 (Span), Elemento 3 (Button) cuyos manejadores onclick son handler1(), handler2() y handler3() respectivamente.

< div id = "Element1" onclick = "handler1()" > < span id = "Element2" onclick = "handler2()" > < input type = "button" id = "Element3" onclick = "handler3()" /> </ span > </ div >

Cuando se hace clic en el botón Element3, primero se activa un controlador de eventos para Element 3, luego el evento se propaga y se llama al controlador para el elemento padre inmediato, Element 2, seguido del controlador para Element 1 y así sucesivamente hasta que llega al elemento DOM más externo.

Orden de manejo de eventos: handler3() → handler2() → handler1()

El elemento más interno desde donde se activa el evento se llama elemento objetivo. ^{[ 3 ]} La mayoría de los navegadores consideran el burbujeo de eventos como la forma predeterminada de propagación de eventos. Sin embargo, existe otro enfoque para la propagación de eventos conocido como captura de eventos , ^{[ 4 ]} que es directamente opuesto al burbujeo de eventos, donde el manejo de eventos comienza desde el elemento más externo (o documento) de la estructura DOM y llega hasta el elemento objetivo, ejecutando el controlador del elemento objetivo al final del orden.

Todos los manejadores de eventos consideran el burbujeo de eventos como la forma predeterminada de manejar eventos. Pero un usuario puede seleccionar manualmente la forma de propagación especificándola como el último parámetro en ^{[ 5 ]} de cualquier elemento en JavaScript .addEventListener()

addEventListener ( "type" , "Listener" , "CaptureMode" )

Si CaptureMode es False, el evento se gestionará mediante la propagación de eventos.

Si CaptureMode es True, el evento se gestionará mediante la captura de eventos.

Si un usuario no especifica ningún valor para el argumento CaptureMode, por defecto se considera como propagación de eventos. La mayoría de los navegadores admiten tanto la propagación de eventos como la captura de eventos (excepto IE <9 y Opera <7.0, que no admiten la captura de eventos). ^{[ 1 ]}

JavaScript también proporciona una propiedad de evento llamada bubbles.Para comprobar si el evento es un evento de propagación o no. Devuelve un valor booleano (Verdadero o Falso) dependiendo de si el evento puede propagarse a los elementos padres en la estructura DOM o no.

var isBubblePossible = evento.burbujas ;​​

isBubblePossible : Verdadero, si el evento puede propagarse hasta los antepasados

isBubblePossible : Falso, si el evento no puede propagarse hacia arriba ^{[ 6 ]}

Para manejar casos donde un evento tiene más de un controlador, se puede implementar el concepto de propagación de eventos. El uso principal de la propagación de eventos es el registro de funciones predeterminadas presentes en el programa. En los últimos tiempos, no muchos desarrolladores utilizan la captura de eventos o la propagación en particular. No es necesario implementar la propagación de eventos; puede resultar complicado para los usuarios realizar un seguimiento de las acciones que se ejecutan debido a un evento. ^{[ 1 ]}

En ocasiones, resulta útil evitar que un único desencadenante en un elemento provoque múltiples desencadenantes en sus elementos ancestros. JavaScript proporciona los siguientes métodos para prevenir la propagación de eventos:

1) stopPropagation(): Este método detiene la propagación de cualquier evento a sus elementos padres, invocando únicamente el controlador de eventos del elemento de destino. Aunque es compatible con todos los navegadores compatibles con W3C, Internet Explorer anterior a la versión 9 requiere el alias histórico cancelBubble , ^{[ 7 ]} como en:

evento.cancelBubble = verdadero ;​​

Para todos los navegadores compatibles con W3C:

evento.stopPropagation ( ) ;

2) stopImmediatePropagation(): Este método no solo detendrá la propagación posterior, sino que también impedirá la ejecución de cualquier otro controlador del evento objetivo. En el DOM, un mismo evento puede tener múltiples controladores independientes, por lo que detener la ejecución de un controlador de eventos generalmente no afecta a los demás controladores del mismo objetivo. Sin embargo, el método stopImmediatePropagation() impide la ejecución de cualquier otro controlador del mismo objetivo. ^{[ 7 ]}

Para todos los navegadores compatibles con W3C:

evento.stopImmediatePropagation ( ) ;

Otro método para detener la propagación de eventos consiste en cancelar el evento en sí, aunque esto también impide la ejecución del controlador de destino.

• evento DOM