Qué Son los Eventos Bubbling en JavaScript

Nube Colectiva

hace 2 años

En esta página:

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” y “¿ 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.


<ul id="frase">
    <li id="hijo1"> Hola </li>
    <li id="hijo2"> Crack </li>
    <li id="hijo3"> de </li>
    <li id="hijo4"> la </li>
    <li id="hijo5"> Programación </li>
</ul>

<li id="hijo2"> Crack </li>

<li id="hijo5"> Programación </li>

</ul>

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:


const elementoPadre = document.getElementById("frase")
const hijo1 = document.getElementById("hijo1")
const hijo2 = document.getElementById("hijo2")
const hijo3 = document.getElementById("hijo3")
const hijo4 = document.getElementById("hijo4")
const hijo5 = document.getElementById("hijo5")

// Agregamos un detector de eventos al elemento principal
elementoPadre.addEventListener('click', ()=>{
    console.log('Se hizo clic en el elemento padre')
})

// Agregamos un detector de eventos a todos los elementos secundarios
hijo1.addEventListener('click', ()=>{
    console.log('Se hizo clic en hijo1')
})
hijo2.addEventListener('click', ()=>{
    console.log('Se hizo clic en hijo2')
})
hijo3.addEventListener('click', ()=>{
    console.log('Se hizo clic en hijo3')
})
hijo4.addEventListener('click', ()=>{
    console.log('Se hizo clic en hijo4')
})
hijo5.addEventListener('click', ()=>{
    console.log('Se hizo clic en hijo5')
})

const elementoPadre = document.getElementById("frase")

const hijo1 = document.getElementById("hijo1")

const hijo2 = document.getElementById("hijo2")

const hijo3 = document.getElementById("hijo3")

const hijo4 = document.getElementById("hijo4")

const hijo5 = document.getElementById("hijo5")

// Agregamos un detector de eventos al elemento principal

elementoPadre.addEventListener('click', ()=>{

console.log('Se hizo clic en el elemento padre')

})

// Agregamos un detector de eventos a todos los elementos secundarios

hijo1.addEventListener('click', ()=>{

console.log('Se hizo clic en hijo1')

})

hijo2.addEventListener('click', ()=>{

console.log('Se hizo clic en hijo2')

})

hijo3.addEventListener('click', ()=>{

console.log('Se hizo clic en hijo3')

})

hijo4.addEventListener('click', ()=>{

console.log('Se hizo clic en hijo4')

})

hijo5.addEventListener('click', ()=>{

console.log('Se hizo clic en hijo5')

})

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:


const elementoPadre = document.getElementById("frase")
const hijo1 = document.getElementById("hijo1")
const hijo2 = document.getElementById("hijo2")
const hijo3 = document.getElementById("hijo3")
const hijo4 = document.getElementById("hijo4")
const hijo5 = document.getElementById("hijo5")

// Agregamos un detector de eventos al elemento principal
elementoPadre.addEventListener('click', ()=>{
    console.log('Se hizo clic en el elemento padre')
})

// Agregamos un detector de eventos a todos los elementos secundarios
hijo1.addEventListener('click', (e)=>{
    e.stopPropagation() // Impedidos que el evento se propague más 
    console.log('Se hizo clic en hijo1') 
})
hijo2.addEventListener('click', (e)=>{
    e.stopPropagation() // Impedidos que el evento se propague más 
    console.log('Se hizo clic en hijo2')
})
hijo3.addEventListener('click', (e)=>{
    e.stopPropagation() // Impedidos que el evento se propague más 
    console.log('Se hizo clic en hijo3')
})
hijo4.addEventListener('click', (e)=>{
    e.stopPropagation() // Impedidos que el evento se propague más 
    console.log('Se hizo clic en hijo4')
})
hijo5.addEventListener('click', (e)=>{
    e.stopPropagation() // Impedidos que el evento se propague más 
    console.log('Se hizo clic en hijo5')
})