JavaScript es un lenguaje de programación orientado a eventos, aquellos momentos en los el usuario ejecuta una acción a la que podemos reaccionar. En este post, te enseñaremos en qué consiste el concepto de event bubbling en el DOM, fundamental para entender cómo se propagan los eventos en este espacio.
¿Qué es el event bubbling en el DOM?
Cuando hablamos de event bubbling en el DOM nos referimos a la teoría sobre cómo se propagan los eventos en el DOM. Normalmente, este concepto se acompaña del event capturing, pues ambos definen cómo se comportan los eventos a nivel del DOM. Por ello, antes de explicarte sobre este concepto, te invitamos a leer nuestro post sobre eventos en frontend JavaScript.
En nuestro post sobre el Document Object Model, te hemos enseñado que el concepto del DOM se refiere a un árbol jerárquico de etiquetas o nodos HTML. Es decir, se manejan nodos dentro de nodos. Esto implica que un evento insertado en un nodo determinado afectará de un modo u otro a los demás nodos en su rama, ya sean sus padres o sus hijos.
El concepto de event bubbling en el DOM dice que la propagación de un evento generalmente sucede hacia arriba en el árbol jerárquico. Es decir, si haces clic en un elemento que está dentro de otro, estás a su vez haciendo clic en el elemento contenedor, su etiqueta HTML padre. Este comportamiento de tipo event bubbling en el DOM es de lo más cotidiano.
¿Y por qué es importante conocer este concepto? Pues porque nos permitirá hacer que un nodo que no tiene necesariamente un evento pueda escucharlo y reaccionar a él.
Un comando adyacente a este concepto es el de event.bubbles. Te invitamos a conocer más sobre este comando en el artículo event.bubbles de Mozilla Developer Network.
¿Cómo compruebo el event bubbling en el DOM?
El comportamiento de propagación de un evento o event bubbling en el DOM se puede comprobar desde el navegador bajo la propiedad path. Para entenderlo mejor, te ponemos un ejemplo. Supongamos que tenemos el evento que creamos en nuestro post sobre querySelector y querySelectorAll:
for (const button of buttonListElement) {
button.addEventListener )”click”, (event) => {
drawTime (event.target.textContent);
});
}
Ahora, para comprobar el event bubbling en el DOM, puedes insertar el comando console.log y pintar el evento en pantalla:
for (const button of buttonListElement) {
button.addEventListener (“click”, (event) => {
console.log (event);
drawTime (event.target.textContent);
});
}
Ahora, si desde el inspector de tu navegador despliegas el objeto que nos devuelve el evento, podrás revisar la propiedad path. Allí verás un array con distintas etiquetas HTML. Estas empiezan con el nodo en el que se ha producido el evento y siguen hacia arriba en su rama del árbol. En nuestro caso, esta propiedad se ve de la siguiente manera:
path: (6) [button, main, body, html, document, window]
En nuestro path anterior, podemos ver que button es hijo de main, que, a su vez, es hijo de body. Después de body, la progresión es lógica: html, document y window. Si viéramos nuestro código HTML y sus elementos desde la sección elements del inspector, veríamos que estos elementos se despliegan en este orden.
Ahora que conocemos estos nodos, podemos hacer que el elemento main escuche y reaccione al evento del button con cualquier función que queramos.
¿Quieres seguir aprendiendo?
Si ahora que conoces qué es el concepto de event bubbling en el DOM quieres seguir aprendiendo sobre el mundo del desarrollo web, no dudes en inscribirte en nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva e integra aprenderás, con el acompañamiento de profesionales, todo lo necesario para convertirte en un experto de este mundo en pocos meses. ¡Entra y solicita información!
