Qué Son los Eventos Bubbling en JavaScript

4 minuto(s)

Un evento es una ocurrencia o algo que sucede. En el caso de Javascript, los eventos son ocurrencias o algo que sucede en el navegador y la acción de un usuario lo desencadena. Pueden ser clics, cargar páginas, desplazarse, etc. En el navegador, Javascript se usa para hacer páginas dinámicas e interactivas y Event permite que las páginas sean muy interactivas y dinámicas. En este Post te enseñaré sobre Qué Son los Eventos Bubbling en JavaScript, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación“¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Qué Son los Eventos Bubbling en JavaScript.

Eventos Bubbling en JavaScript

El término bubbling traducido al español significa burbujeante, por ende se define como Eventos Burbujeantes en JavaScript. Cuando un evento reside en un elemento dentro de otro elemento y ambos elementos han registrado un identificador para ese evento, la API HTML DOM utiliza la difusión de eventos como una forma de propagación de eventos. Es un procedimiento que comienza con el elemento que causó el evento y luego cae en cascada hasta los elementos de la jerarquía que lo contienen.

Cuando un evento burbujea, el elemento más interno lo captura y lo administra antes de pasarlo a los elementos circundantes, el elemento desordenado que contiene el elemento de la lista.


Suponiendo que el elemento más externo <ul> escucha un evento de clic y el elemento secundario <li> escucha el mismo evento. Veamos el siguiente ejemplo:


Si revisamos la consola cuando se hace clic en un elemento secundario, observaremos que la consola se registrará dos veces, una para el elemento principal y otra para el elemento secundario. Esto se debe a que cuando se hizo clic en el elemento secundario, se activó su detector de eventos. Después de activar el detector de eventos del hijo, este evento también se propagó. Desencadenó el detector de eventos del padre, lo que provocó que la consola registrara la declaración del controlador de eventos del padre y del hijo.

Cómo Detener la Propagación de Eventos

En el ejemplo anterior sobre el burbujeo de eventos, dijimos que  es la propagación de un evento desde un elemento secundario hasta su padre más externo. A veces, es posible que deseemos evitar que esta propagación llegue al padre más externo. Para hacer esto, usamos un método de evento llamado stopPropagation. Este método evita que la API propague el evento al elemento más externo. Usamos el mismo código anterior; esto evita que el evento se propague:


El e en el interior del paréntesis de función representa el objeto de evento.

Conclusión

En este Post discutimos acerca del burbujeo de eventos o los Eventos Bubbling en JavaScript. La mejor manera de dominar este concepto, es poniendolo en práctica o usandolo en nuestros proyectos. La práctica hace al maestro.

Nota(s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.