JavaScript es un lenguaje de programación orientado a eventos, que son los elementos fundamentales para reaccionar a las acciones del usuario en la web. En este post, te enseñaremos qué es y cómo funciona el concepto de event capturing en el DOM, complementario al concepto de event bubbling.
¿Qué es event capturing en el DOM?
Event capturing en el DOM es un concepto que se refiere a la propagación de eventos en el árbol jerárquico de etiquetas HTML o Document Object Model. En este sentido, este concepto es similar y complementario al de event bubbling. En nuestros posts sobre event bubbling en el DOM y cómo entender event bubbling, te hemos explicado que los eventos suelen propagarse hacia arriba en el árbol del DOM. Es decir, un evento puede ser escuchado por todos los padres del elemento HTML en el que se ejecuta.
Si todavía tienes dudas sobre qué es un evento y cómo funciona en el contexto del DOM, te recomendamos leer el artículo evento en la página oficial de Mozilla Developer Network. También puedes leer nuestros posts sobre eventos en la sección de desarrollo web de nuestro blog.
Entonces, cuando hablamos de event capturing en el DOM, nos referimos al proceso contrario al de event bubbling. Es decir, al igual que un evento puede viajar desde el nodo en el que se produce un evento hacia arriba, también podemos hacer que se haga a la inversa, hacia abajo. A continuación, te explicamos exactamente cómo logramos esto.
¿Cómo funciona event capturing en el DOM?
Para hacer un event capturing en el DOM, deberemos incluir un parámetro más dentro del método addEventListener. Como puedes leer en el artículo EventTarget.addEventListener en la Mozilla Developer Network, este método suele tener dos parámetros. El primero se refiere al tipo de evento que queremos escuchar y el segundo es una función manejadora del evento, que definirá qué se ejecuta cuando este aparezca en la web.
Entonces, para crear un event capturing en el DOM, necesitamos un tercer parámetro dentro del método addEventListener. ¿Cuál es este parámetro? Pues un simple valor booleano true. Este valor hace que la propagación del evento capturado se desarrolle al revés, es decir, de arriba hacia abajo.
A continuación, te mostramos unas cuantas líneas de código que nos ayudarán a entender el concepto de event capturing en el DOM. Allí podrás ver que estamos creando un elemento HTML div que contiene, a su vez, un elemento HTML de tipo p o párrafo. Esta línea la estaremos creando directamente sobre nuestro archivo HTML:
<div id=»div»> <p id=»p»> I’m a batman </p></div>
Ahora, podemos usar el método para seleccionar nodos en el DOM getElementById para seleccionar los nodos anteriores directamente desde un archivo JavaScript:
document.getElementById(«p»).addEventListener («click, function ( ) {alert («p»); ), true );
document.getElementById(«div»).addEventListener («click, function ( ) {alert («div»); ), true );
Las líneas de código anteriores harán que se genere un event capturing en el DOM, sobrescribiendo el comportamiento natural de la propagación de eventos. En el contexto de este ejemplo, esto haría que primero se ejecute el alert del elemento HTML div y luego el del elemento HTML p. El motivo de esto es que la propagación se ejecutará de arriba hacia abajo, es decir, primero se dará el evento en el padre (div) y luego en el hijo (p).
Ten presente que el concepto de event capturing en el DOM suele ser más teórico que práctico. Esto significa que un desarrollador web normalmente no suele usar este cambio de propagación, a menos de que sea en momentos muy puntuales. Por esto, te recomendamos que, si vas a ejecutar esta técnica, pienses muy bien si no existe ninguna otra alternativa para lo que quieres hacer.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el concepto de event capturing en el DOM, te invitamos a seguir aprendiendo sobre los distintos conceptos del mundo del desarrollo web en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con diversos lenguajes de programación y herramientas. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya y descubre cómo darle un giro a tu vida en pocos meses!
