Comprender la propagación de eventos en JavaScript

Los eventos en JavaScript actúan como notificaciones de que ha tenido lugar la interacción de un usuario u otra acción. Por ejemplo, cuando hace clic en un botón de formulario, su navegador genera un evento para indicar que esto ha sucedido. Escribir en un cuadro de búsqueda también genera eventos y así es como la sugerencia automática a menudo funciona en línea.

En JavaScript, los eventos que involucran la interacción del usuario generalmente se activan contra elementos específicos. Por ejemplo, hacer clic en un botón genera un evento contra ese botón. Pero los eventos también se propagan: disparan contra otros elementos de la jerarquía del documento.

Siga leyendo para conocer todo sobre la propagación de eventos y los dos tipos distintos disponibles.

¿Qué es el manejo de eventos en JavaScript?

Puede utilizar código JavaScript para detectar y responder a los eventos que genera una página web. Puede hacer esto para anular el comportamiento predeterminado o tomar medidas cuando no exista ningún valor predeterminado. Un ejemplo común es la validación de formularios. El manejo de eventos le permite interrumpir el proceso normal de envío de formularios.

Considere este ejemplo:

Haz click en mi

El código anterior tiene un elemento de botón con una identificación llamada botón. Tiene un detector de eventos de clic que muestra una alerta con el mensaje Hola Mundo.

¿Qué es la propagación de eventos?

La propagación de eventos describe el orden en que los eventos viajan a través del Árbol DOM cuando el navegador web los activa.

Suponga que hay una etiqueta de formulario dentro de una etiqueta div, y ambas tienen detectores de eventos onclick. Propagación de eventos describe cómo un detector de eventos puede dispararse tras otro.

Hay dos tipos de propagación:

1. Evento burbujeante, por el cual los eventos burbujean hacia arriba, de niño a padre.
2. Captura de eventos, mediante la cual los eventos viajan hacia abajo, de padres a hijos.

¿Qué es el burbujeo de eventos en JavaScript?

La propagación de eventos significa que la dirección de la propagación del evento será desde el elemento secundario a su elemento principal.

Considere el siguiente ejemplo. Tiene tres elementos anidados: div, form y button. Cada elemento tiene un hacer clic oyente de eventos. El navegador muestra un alerta con un mensaje al hacer clic en cada elemento.

De forma predeterminada, el orden en el que el navegador web muestra las alertas será botón, formulario y luego div. Los eventos fluyen de un niño a otro.

 div


 formulario 



 Botón

¿Qué es la captura de eventos?

Con la captura de eventos, el orden de propagación es el opuesto al burbujeo. De lo contrario, el concepto es idéntico. La única diferencia con la captura es que los eventos ocurren de padres a hijos. A diferencia del ejemplo anterior, con la captura de eventos, el navegador mostrará alertas en este orden: div, formulario y botón.

Para lograr la captura de eventos, solo necesita realizar un cambio en el código. El segundo parámetro de addEventListener () define el tipo de propagación. Es falso por defecto, para representar burbujeo. Para habilitar la captura de eventos, debe establecer el segundo parámetro en verdadero.

 div.addEventListener ("clic", () => {
 alerta ("div")
 }, cierto);
 form.addEventListener ("clic", () => {
 alerta ("formulario")
 }, cierto);
 button.addEventListener ("clic", () => {
 alerta ("botón")
 }, cierto);

¿Cómo se puede prevenir la propagación de eventos?

Puede detener la propagación de eventos utilizando el stopPropagation () método. El addEventListener () El método acepta un nombre de evento y una función de controlador. El controlador toma un objeto de evento como parámetro. Este objeto contiene toda la información sobre el evento.

Cuando invocas el stopPropagation () método, el evento dejará de propagarse desde ese punto. Por ejemplo, cuando usa stopPropagation () en el elemento de formulario, los eventos dejarán de propagarse al div. Si hace clic en el botón, verá los eventos generados en el botón y el formulario, pero no en el div.

form.addEventListener ("clic", (e) => {
e.stopPropagation ();
 alerta ("formulario");
});

Relacionado: La última hoja de trucos de JavaScript

JavaScript tiene mucho poder bajo el capó

El manejo de eventos de JavaScript es poderoso, comparable a muchos lenguajes de interfaz completos. Cuando está desarrollando aplicaciones web interactivas, es una parte vital de su caja de herramientas. Pero hay muchos otros temas avanzados que comprender. Para los desarrolladores profesionales de JavaScript, ¡hay mucho que aprender!

Si desea aprender a codificar JavaScript como un profesional, consulte nuestra guía de liners inteligentes y prepárese para sorprender en su próxima entrevista.

11 frases sencillas de JavaScript que debe conocer

Logre mucho con solo un poco de código utilizando esta amplia gama de frases sencillas de JavaScript.

Leer siguiente

Sobre el Autor