Vamos, 'Aprende como si tuvieras 5 años' es solo una frase. ¡No estoy contando una historia de juguetes aquí! Pero te prometo que si lees atentamente de principio a fin, todo tendrá sentido.

La propagación y captura de eventos son dos fases de cómo los eventos se propagan (o viajan) a través del DOM (modelo de objetos de documento) cuando se activa un evento en JavaScript. Ahora bien, esta declaración requiere aclarar el concepto de propagación de eventos.

Propagación de eventos

Cuando ocurre un evento en un elemento, como un botón dentro de un div, el evento no ocurre simplemente en ese botón. El evento viaja a través del DOM en un proceso conocido como propagación de eventos. Este proceso ocurre en dos fases principales:

• Captura de eventos (también llamado "goteo")

• Evento burbujeante

Ahora, espero que hayas entendido la idea. Entendamos ambos con ejemplos.

Burbuja de eventos

La propagación de eventos significa que cuando ocurre un evento en un elemento, primero activa el controlador de eventos para ese elemento. Luego, se mueve hacia arriba en el árbol DOM para activar los controladores de eventos de sus elementos principales, y así sucesivamente, hasta llegar al documento o a la raíz del árbol DOM.

  Parent Div
  Click Me!

Ejemplo de explicación: Cuando haces clic en el botón, aparece el mensaje "¡Botón hecho clic!" La alerta se muestra primero porque el evento se activa en el botón. Después de eso, el evento "se propaga" hasta el div principal y verá el mensaje "¡Se hizo clic en el div principal!". alerta. Esto se debe a que el evento comienza en el botón y luego sube a su div principal. Entonces, este proceso de propagación se llama "Evento Burbujeante".

Captura de eventos

La captura de eventos es lo contrario de burbujear. El evento comienza desde la parte superior de la página web (comenzando con el documento) y desciende hacia el elemento con el que interactuó. Esto significa que los controladores de eventos para los elementos principales se activarán primero y el evento se moverá al elemento secundario en el que hizo clic o con el que interactuó.

  Parent Div
  Click Me!

En este caso, cuando hace clic en el botón, aparece el mensaje "¡Se hizo clic en la división principal!" La alerta se mostrará primero. Luego, el "¡Botón hecho clic!" La alerta se mostrará porque el evento comienza desde el nivel del documento, captura (gotea) hasta el div principal primero y luego llega al botón.

El valor verdadero del tercer argumento de addEventListener es el determinante de la fase de captura.

Cada evento pasa por 3 fases

Naturalmente, cada evento pasa por las tres fases:

• Fase de captura: el evento comienza en la parte superior (documento) y desciende hasta el objetivo.

• Fase objetivo: El evento llega al elemento con el que interactuaste (el objetivo).

• Fase de burbujeo: después de alcanzar el objetivo, el evento vuelve a burbujear a través de los elementos principales.

Entonces sí, un evento se mueve naturalmente a través de las tres fases, pero JavaScript te da control sobre en qué fase actuará tu detector de eventos.

Aunque los eventos pasan por las tres fases, los detectores de eventos de JavaScript están de forma predeterminada adjuntos a la fase de burbujeo. Esto significa que cuando agrega un detector de eventos sin especificar nada, escuchará el evento solo en la fase de propagación (después de que el evento haya alcanzado el objetivo y comience a ascender).

Cuando pasas verdadero como tercer argumento, le dices a JavaScript que escuche el evento durante la fase de captura (mientras viaja por el DOM). El evento aún pasa por todas las fases (captura, objetivo y burbujeo), pero el oyente se activará durante la fase de captura, antes de que el evento alcance el elemento objetivo.

¿El evento pasa de capturar a burbujear cuando usas verdadero? No, el evento siempre se mueve tanto a través de la captura como del burbujeo. Cuando pasa verdadero, no está evitando la fase de burbujeo. Simplemente le estás diciendo al oyente que responda durante la captura. El evento continuará desde la captura hasta el objetivo y luego burbujeará como de costumbre.

Resumen:

• Todos los eventos pasan naturalmente por las fases de captura, objetivo y burbujeo.

• De forma predeterminada, los detectores de eventos funcionan durante la fase de burbujeo (después de que el evento alcanza el objetivo y avanza hacia arriba).

• Cuando pasas verdadero, le estás diciendo al detector de eventos que active durante la fase de captura (a medida que el evento viaja hacia abajo).

• El evento aún pasa por todas las fases (captura, objetivo y burbujeo), pero tu oyente decide en qué fase actuar.