¿Sabes cómo evitar la propagación de eventos en el DOM? El DOM es un concepto fundamental en el desarrollo web, pues nos permite interactuar con el contenido de un archivo HTML desde el código JavaScript. Una de las acciones que podemos hacer con el DOM es insertar eventos en sus elementos HTML, que a su vez se propagan por las etiquetas del archivo.
En este post, te enseñaremos cómo evitar la propagación de eventos en el DOM para que lo apliques si así lo necesitas.
¿Qué es la propagación de eventos en el DOM?
La propagación de eventos en el DOM es un concepto teórico que nos explica cómo se mueven los eventos por las ramas del árbol jerárquico de etiquetas HTML, también conocido como Document Object Model.
Recuerda que un evento es una acción que se ejecuta sobre un elemento HTML y sobre la cual podemos ejecutar determinadas reacciones. Un ejemplo de un evento es el clic de un usuario sobre un botón (elemento HTML). Luego, como reacción a este clic podemos ejecutar muchas reacciones, desde cambiar el color del botón hasta redirigir al usuario a una nueva página web.
En nuestros posts sobre event bubbling en el DOM y cómo entender event bubbling, te hemos explicado que la propagación de eventos en el DOM normalmente sucede en orden ascendente. Es decir, un evento se propaga hacia arriba en su rama, llegando hasta la cima del árbol DOM. Entonces, un evento clic en un botón podrá ser escuchado por todos los padres directos de esta etiqueta o nodo HTML.
Conocer este concepto puede ser útil cuando queremos que el padre de un botón, por ejemplo su contenedor, escuche un evento y reaccione a él. Un ejemplo sería una alerta con un botón de X que nos permite cerrar la alerta. Entonces, cuando el usuario haga clic sobre la X no solo queremos que este elemento reaccione, sino también que el contenedor de la alerta reaccione. Para ello, haríamos que el contenedor escuche el evento gracias a event bubbling.
Ahora, en nuestro post sobre event capturing en el DOM te hemos enseñado que también podemos alterar la propagación de eventos. Es decir, podemos hacer que los eventos se propaguen en orden descendente para que sean los hijos de un elemento HTML los que puedan escuchar el evento y no sus padres.
Del mismo modo en que podemos alterar el concepto de event bubbling, JavaScript también nos permite evitar la propagación de eventos en el DOM por completo. A continuación, te enseñamos cómo.
¿Cómo evitar la propagación de eventos en el DOM?
Para evitar la propagación de eventos en el DOM podemos hacer uso del método stopPropagation, que pertenece a la interface Event. Para utilizar este método, basta con insertarlo dentro de los parámetros del evento addEventListener. Esto hará que el evento ocurra en el nodo actual, pero que no se propague a sus padres. A continuación, te ponemos un ejemplo de este uso:
const divListElement = document.querySelector («div»);
divListElement.forEach (div) => {
div.addEventListener («click», (event) => {
console.log (event.target);
event.stopPropagation ( );
});
});
Es importante tener en cuenta que este método solo sirve para evitar la propagación de eventos en el DOM, no para alterar su comportamiento. Para esta última acción, te recomendamos leer nuestro post sobre el comportamiento por defecto HTML, en donde te explicamos cómo usar el método preventDefault para sobrescibir comportamientos. Si, además, quieres prevenir la propagación inmediata de otros escuchadores del evento, deberás usar el método stopImmediatePropagation, del cual puedes aprender más en el artículo Event.stopImmediatePropagation de la MDN.
¿Cuál es el siguiente paso?
Ahora que sabes cómo evitar la propagación de eventos en el DOM, estás muy cerca de dominar este espacio del desarrollo web. Sin embargo, ¡todavía queda mucho por aprender antes de ser un experto! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo necesario sobre el mundo del desarrollo web, desde lenguajes de programación hasta librerías, como React y Axios. ¡No te lo pierdas y solicita información ahora!
