Generación de eventos y captura de eventos en JavaScript: todo lo que necesita saber

Event Bubbling y Event Capturing son los términos más utilizados en JavaScript en el momento del flujo de eventos. Estas son las dos formas de propagación de eventos en la API DOM de HTML. Este artículo sobre Event Bubbling y Event Capturing en JavaScript describirá en detalle por qué los necesitamos en en la siguiente secuencia:

• • • ¿Qué es Event Bubbling en JavaScript?
    • ¿Qué es la propagación de eventos?
    • ¿Qué es la captura de eventos?
    • Uso de generación de eventos y captura de eventos en JavaScript
    • Procedimiento de trabajo

¿Qué es Event Bubbling en JavaScript?

Event Bubbling es el término que las personas deben encontrar al desarrollar una aplicación web o una página web utilizando . Básicamente, el Event Bubbling es una técnica en la que se llama a los controladores de eventos cuando un elemento está anidado en otro elemento y debe ser del mismo evento. Es similar a la encapsulación.

Event Bubbling es solo una pequeña parte del manejo de eventos en JavaScript. Para entenderlo mejor, tenemos que conocer la propagación de eventos y cómo es compatible con Event Bubbling.

¿Qué es la propagación de eventos?

La propagación de eventos se puede comparar como término principal con la propagación y captura de eventos como su hijo.Se representa de la siguiente manera:

terminar un programa en java

Si hace clic en cualquier imagen, no solo generará un evento de clic, sino que pasará al padre 'a' y al abuelo 'li'. De esta forma se produce la propagación de la función. Aquí la imagen se considera secundaria y es el destino del evento donde se genera el clic. La imagen junto con sus antepasados ​​juntos forman la rama en una terminología de árbol. La rama es importante a medida que conocemos el camino a lo largo del cual se propaga el evento.

Cada uno de los oyentes se llama con un objeto de evento, respectivamente, que recopila información sobre el evento. Esta propagación es muy importante ya que llegamos a conocer el proceso de llamar a todos los oyentes para el evento dado. En la imagen de arriba podemos notar que la determinación de la rama es estática. Se ignora cualquier modificación del árbol que ocurra durante el evento. Aquí la propagación es bidireccional, es decir, va desde la ventana al objetivo del evento y vuelve. Aquí, la propagación se clasifica ampliamente en tres tipos principales. Esos son:

1. La fase de captura: Pasando de la ventana a la fase objetivo del evento.
2. La fase objetivo: Es la fase objetivo.
3. La fase de la burbuja: Desde el padre objetivo del evento hasta la ventana.

¿Qué es la captura de eventos?

En esta fase, se llama a los oyentes capturadores cuyo valor se ha registrado como 'verdadero'. Está escrito como:

el.addEventListener('click', listener, true)

Aquí, el valor de escucha se ha registrado como 'verdadero', por lo que se captura este evento. Si no había ningún valor, el valor predeterminado era falso y el evento no se capturaría. Entonces, en esta fase, ese evento cuyo valor es verdadero solo se abre camino desde la ventana y es llamado y capturado.

Luego, en la fase de destino del evento, se llama a todos los oyentes registrados independientemente de que el estado de su bandera sea verdadero o falso.

cómo establecer la ruta para java

Uso de generación de eventos y captura de eventos en JavaScript

En la fase de burbujeo, solo se llama al no capturador, es decir, los eventos que tienen el valor de la bandera como 'falso'. La propagación de eventos y la captura de eventos son muy útiles e importantes en la terminología DOM (Document Object Model).

el.addEventListener ('click', oyente, falso) // el oyente no captura el.addEventListener ('click', oyente) // el oyente no captura

El fragmento de código anterior muestra el funcionamiento de la fase de burbujeo y captura. No todos los eventos van al destino del evento. Algunos de ellos no se llenan de burbujas. Su viaje se detiene después de la fase objetivo. El flujo de tres fases de eventos se ilustra en el siguiente diagrama:

El burbujeo de eventos no funciona en todos los tipos de eventos, sin embargo, el oyente debe poseer '.burbuja ”Propiedad booleana del objeto de evento. Algunas de las otras propiedades incluyen:

1. e.target: que hace referencia al objetivo del evento.
2. e.currentTarget: es el modo en el que están registrados los oyentes actuales. Aquí se hace referencia al valor usando esta palabra clave.
3. e.eventPhase: Es un número entero que se refiere a otras tres palabras clave como Capturing_phase, Bubbling_phase, AT_Target fase.

Procedimiento de trabajo

Echemos un vistazo más de cerca en la ilustración anterior. Hagamos clic en el elemento 'buttonOne' e inmediatamente se activará un evento. Normalmente, un evento comienza su viaje desde la raíz que es el elemento más alto del árbol. Luego va siguiendo el árbol el evento de destino que es 'buttonOne'. Así es como viaja:

Como se muestra en la figura, el evento se abre paso a través de las terminologías DOM llegando al evento de destino al final. Ahora, una vez que el evento alcanza su objetivo, no termina. Sigue y sigue dentro de las terminologías DOM como se ilustra en la siguiente imagen.

cuál es la instancia de una clase en java

Al igual que antes, cada elemento a lo largo de la ruta del evento a medida que avanza recibe una notificación sobre su existencia. A medida que avanza así, debe estar pensando si podemos detener el proceso o no. Bueno, la respuesta a la pregunta es Sí, podemos detener la propagación del evento. Esto se hace invocando el 'StopPropagation' método del objeto de evento.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Aplicando la palabra clave podemos detener la propagación. Funciona así, cuando aplicamos la palabra clave ' stopPropagation ' entonces no se llamarán todos los eventos bajo los eventos principales y, por lo tanto, no se llamarían como se menciona en el código anterior. Hay otra palabra clave conocida como ' stopImmediatePropagation ”. Como sugiere el nombre, detiene inmediatamente los procedimientos de los hermanos.

Con esto, hemos llegado al final de nuestro artículo. Espero que haya entendido qué es Event Bubbling y Event Capturing en JavaScript.

Ahora que conoce el burbujeo de eventos y la captura de eventos en JavaScript, consulte el por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender a crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3).

Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios de 'Evento burbujeante y captura de eventos en JavaScript' y nos comunicaremos con usted.