Burbujeo de eventos y captura de eventos en Javascript explicado: ¿Cómo utilizar?
Publicado: 2020-03-26Tabla de contenido
Introducción
Dos terminologías muy comunes que se usan para el flujo de eventos en JavaScript son Event Bubbling y Event Capturing .
Estas son dos formas importantes en las que se propaga un evento en la API HTML DOM cuando ambos elementos registran un identificador para un evento y el evento ocurre en un elemento anidado en otro elemento. El orden en que los elementos reciben un evento está determinado por el modo de propagación del evento. Siga leyendo para conocer el uso de Event Bubbling y Event Capturing en JavaScript y por qué son necesarios en el desarrollo de páginas web.
Conclusiones clave
- Explicación de los términos evento, flujo de eventos, controladores de eventos y detectores de eventos
- Burbujeo de eventos y captura de eventos en JavaScript
- Utilidad de burbujeo de eventos y captura de eventos en JavaScript
Eventos y flujo de eventos
La interacción de las páginas web HTML con JavaScript está mediada por eventos que ocurren cuando el usuario o el navegador manipulan la página. La carga de una página, el usuario haciendo clic en un botón, cerrando una ventana, son todos ejemplos de eventos.
El orden en que se reciben los eventos en la página web se denomina flujo de eventos. El proceso de flujo de eventos se completa en 3 pasos: captura de eventos (intercepción del evento), orientación de eventos (el objetivo obtiene el evento) y burbujeo de eventos (respuesta al evento).
Controladores de eventos y detectores de eventos en JavaScript
El controlador de eventos es un código JavaScript que se escribe dentro de las etiquetas HTML en lugar de dentro de las etiquetas <script>. Los controladores de eventos ejecutan JavaScript cuando ocurre un evento, como presionar un botón. La sintaxis básica es: name_of_handler=”Código JavaScript aquí”
<a href=”https://www.google.com” onClick=”alert('¡hola!”)”>Goolge</a>
Un procedimiento que espera la ocurrencia de un evento es un Event Listener. JavaScript tiene una función incorporada, addEventListener(), que recibe el evento para escuchar y llama a un segundo argumento cuando se activa dicho evento. La sintaxis es: element.addEventListener(event, listener);
Burbujeo de eventos en JavaScript
Event Bubbling es una terminología común que se encuentra al desarrollar una página web o una aplicación web usando JavaScript. El burbujeo de eventos es una etapa en el proceso de flujo de eventos cuando el evento comienza en el elemento más específico o el nodo anidado más profundo en el DOM y, posteriormente, fluye hacia arriba, hacia el nodo menos específico, es decir, el documento.
Fuente
<!DOCTYPE HTML>
<html>
<cabeza>
<título>……</título>
</cabeza>
<cuerpo>
<div id=”demo”> Presione aquí.</div>
</cuerpo>
</html>
Al hacer clic en el elemento <div>, el evento 'clic' tiene lugar en el siguiente orden:
- <div>
- <cuerpo>
- <html>
- Documento
El evento 'clic' dispara el elemento <div>. Posteriormente, cada nodo se dispara a lo largo del árbol DOM, hacia arriba, hasta que se alcanza el documento de objeto.
Leer: Temas e ideas de proyectos de pila completa
Captura de eventos en JavaScript
La captura de eventos es un modelo alternativo en el flujo de eventos que fue introducido por primera vez por Netscape Browser. Como establece este modelo, un evento es recibido primero por el nodo menos específico y el nodo más específico o el elemento anidado más profundo recibe el evento en último lugar. En este modelo, un evento se intercepta antes de que alcance el objetivo real. Sin embargo, a diferencia de Event Bubbling, los navegadores modernos no son compatibles con este modelo y, por lo tanto, Event Capturing solo se puede usar en circunstancias particulares.
Fuente
Haciendo referencia al ejemplo indicado en la sección anterior, al hacer clic en el elemento <div> se activa el evento 'clic' en el siguiente orden:
- Documento
- <cuerpo>
- <html>
- <div>
¿Qué sucede en la Fase de Captura de Eventos?
En la fase de captura de eventos, se llama a los oyentes capturadores cuyo valor se registra como “verdadero”. Está escrito de la siguiente manera:
el.addEventListener('Hacer clic', oyente, verdadero)
Aquí se captura un evento porque el valor del oyente se registra como "verdadero". En caso de que no haya valor, el valor predeterminado es "falso" con el resultado de que el evento no se captura. Por lo tanto, en esta fase, solo se llaman y capturan los eventos con valor verdadero. En la siguiente fase de destino, se llama a todos los oyentes que están registrados, independientemente de si su valor está registrado como verdadero o falso.
Flujo de eventos DOM en JavaScript
El DOM Nivel 2 especifica tres etapas para el modelo de flujo de eventos:
- Fase de captura de eventos
- en el objetivo
- Fase de burbujeo de eventos
Fuente
Si existe la posibilidad de interceptar el evento, primero se realiza la captura de eventos. Esto es seguido por el objetivo real que obtiene el evento. Eventualmente, en la fase de burbujeo del evento, tiene lugar la respuesta final al evento. Con referencia al ejemplo indicado en la sección anterior, al hacer clic en el elemento <div> se activa el evento 'clic' en el orden ilustrado en el diagrama anterior.
Leer: Salario de desarrollador de pila completa en India
Utilidad de burbujeo de eventos y captura de eventos en JavaScript
En la Fase de burbujeo de eventos, solo se llaman los eventos que tienen un valor de bandera "falso" (no capturadores). El burbujeo de eventos y la captura de eventos son aspectos importantes de DOM.
el.addEventListener('Click', oyente, falso) // el oyente no captura
el.addEventListener('Click', oyente) // el oyente no captura
El código anterior ejemplifica cómo funcionan las fases de burbujeo y captura. Todos los eventos no alcanzan el objetivo. Algunos eventos no se burbujean y dejan de publicar la fase de destino. El evento burbujeante no es aplicable en todos los tipos de eventos y el oyente debe tener la propiedad booleana ".burbuja" del objeto del evento además de poseer otras propiedades como - e.target (para hacer referencia al objetivo del evento) y e.eventPhase (los oyentes actuales se registran en este modo).
Conclusión
El flujo de eventos en JavaScript tiene tres fases importantes: la fase de captura de eventos, la fase de destino y la fase de difusión de eventos. La captura de eventos es la primera en ocurrir, donde los eventos son interceptados si es necesario. A esto le sigue el evento que alcanza el objetivo real y la fase final es burbujeante, cuando tiene lugar la respuesta final a un evento. Por lo tanto, se puede concluir apropiadamente que la difusión de eventos y la captura de eventos en JavaScript son los cimientos de los que dependen el controlador de eventos y la delegación de eventos.
Si está interesado en obtener más información sobre la pila completa, consulte el Diploma PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones, IIIT- B Estado de exalumno, proyectos finales prácticos y asistencia laboral con las mejores empresas.