Burbujeo de eventos o capturas de eventos en JavaScript
Este artículo discutirá el burbujeo de eventos y la captura de eventos de JavaScript. Además, los ejemplos relacionados con el burbujeo de eventos y la captura de eventos se demostrarán en este artículo. Entonces, comencemos!
Burbujeo de eventos en JavaScript
En JavaScript, Event Bubbling es un evento que burbujea del objetivo o los elementos más internos a sus padres, luego sigue un enfoque de fondo a superior y mueve el flujo de control de eventos a sus antepasados. El burbujeo de eventos se considera como método de flujo de eventos predeterminado en todos los navegadores modernos.
Ejemplo: Burbujeante de eventos en JavaScript
En el siguiente ejemplo, hemos agregado un título con la etiqueta, un elemento Div con la identificación "Parentralement" y su elemento de botón de hijo anidado que tiene la identificación "Infancia":
Después de obtener los elementos HTML creados utilizando el "documento.QuerySelector () " Método, agregaremos un oyente de eventos al Div "Parentralement" y su botón anidado "Infancia". La función pasada en el "AddEventListener ()" mostrará la cadena agregada en el "consola.registro()" método:
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
Ahora, haremos clic en el "Niño" botón que se puede ver en la siguiente salida:
Al hacer clic en el "Niño" botón, el pasado "función()" En el método addEventListener () se ejecutará. Entonces el "al hacer clic()" método del "Div" El elemento será invocado. Está sucediendo por el "Burbujeante de eventos":
En el ejemplo anterior, cuando hemos hecho clic en el "Niño" botón, el "hacer clic" El evento se pasa del botón que tiene ID "Infancia" y el control de flujo de eventos se mueve al "documento" en el siguiente orden:
Cómo dejar de burbujear en eventos en JavaScript
Utilizando el "evento.stopPropagation () " Método, puede detener fácilmente el evento burbujeante en su programa JavaScript, y detiene el evento de viaje de abajo hacia arriba.
Ejemplo: deja de burbujear en eventos en JavaScript
En el ejemplo dado a continuación, agregaremos el "evento.stopPropagation () " método para el "al hacer clic()" Evento del botón creado con ID "Infancia". Como resultado de ello, el intérprete JavaScript no pasará el evento al elemento "documento" más externo:
Al hacer clic en el botón resaltado solo se imprimirá "Haga clic en el niño" Y luego evita que el evento burbujee:
Evento Capturación en JavaScript
El proceso en el que se captura un evento cuando su flujo de control se mueve del elemento superior al elemento objetivo se conoce como captura de eventos. Aunque los navegadores modernos no tienen la capacidad de habilitar la captura de eventos de forma predeterminada, puede realizar esta operación a través del código JavaScript.
Ejemplo: Evento capturado en JavaScript
En nuestro programa JavaScript, en primer lugar, agregaremos un título y un "Div" Elemento que tiene ID "Parentralement" y su elemento hijo con "Infancia" identificación:
A continuación, invocaremos el "documento.QuerySelector () " Método para obtener el elemento padre e hijo:
La siguiente "Niño" El botón invocará primero el evento agregado al elemento principal. Después de eso, ejecutará el evento adjunto al objetivo:
En el ejemplo anterior, cuando hemos hecho clic en el "Niño" botón, el "hacer clic" El evento se pasa del elemento principal que es "documento" al objetivo de evento especificado "Infancia" botón:
Cómo dejar de capturar el evento en JavaScript
Para dejar de capturar eventos, puede utilizar el "evento.stopPropagation () " método. La diferencia entre detener la captura del evento y el burbujeo de eventos es que, en el burbujeo de eventos, adjuntamos el "evento.método stopPropagation () "con el evento relacionado con el elemento infantil, mientras que, en el evento, la captura, el evento.El método stopPropagation () se agrega en el evento principal.
Ejecute el ejemplo dado a continuación para saber cómo dejar de capturar el evento con el código JavaScript:
La salida dada significa que la captura de eventos se detiene después de ejecutar el evento asociado con el elemento principal:
Aquí está la vista completa del flujo del evento con el evento capturar y fases de burbujeo de eventos:
Conclusión
En JavaScript, el burbujeo de eventos y la captura de eventos son los conceptos más importantes con respecto a la propagación de eventos. En HTML DOM, la captura de eventos se refiere a la propagación de eventos de elementos antepasados a su hijo. En el burbujeo de eventos, el flujo de control de eventos pasa de los elementos infantiles a los antepasados. Este artículo discutió el burbujeo de eventos de JavaScript y la captura de eventos. Además, los ejemplos relacionados con el burbujeo de eventos y la captura de eventos también se demuestran en este artículo.