¿Qué captura el evento en JavaScript??
En JavaScript, se pueden realizar diferentes tipos de eventos, incluida la captura de eventos y el burbujeo de eventos. Por ejemplo, el evento capturar se propaga desde el elemento raíz al elemento infantil. Por otro lado, el evento burbujeante propaga el elemento infantil al elemento matriz o raíz. Para realizar el evento capturando "addEventListener ()El método se puede usar.
Esta publicación explicará la captura de eventos de JavaScript.
¿Qué captura el evento en JavaScript??
La captura de eventos es un escenario particular en el que los eventos generados comienzan a partir de los elementos principales y se mueven hacia el objetivo/elemento infantil que inició el ciclo de eventos. Es totalmente diferente del burbujeo de eventos, en el que los eventos se propagan hacia afuera de lo específico a los elementos más externos. Además, la captura de elementos ocurre antes de burbujear.
Sintaxis
addEventListener (tipo, oyente, useCapture)
En esta sintaxis:
- "tipo"Determina el tipo de evento.
- "oyente"Define la función de llamada cuando ocurre un evento específico.
- "Usecapture"Indica el valor booleano que es falso de forma predeterminada y muestra que está en la fase burbujeante.
Ejemplo 1: Captura del evento del elemento de botón
Primero, agregue un "div"Contenedor y asignar una ID con un nombre particular para capturar el evento. A continuación, utilice el "El elemento para hacer un botón e incrustar algún texto para mostrar en el botón:
Además, entre el ""Element, primero, invoca el"QuerySelector ()"Método y pasar el"identificación"Para seleccionar y almacenar en la variable declarada:
var patentLement = documento.QuerySelector ('#main');
Luego, acceda al botón usando la ID del botón con la ayuda de "QuerySelector ()":
var infantilement = documento.QuerySelector ('#btn');
Invoca el "addEventListener ()"Y pasa el evento. Este evento funciona cuando el usuario hace clic en el botón. Activará el elemento principal en cada botón Haga clic e imprimirá el resultado en la consola:
sargento.addEventListener ('Click', function ()
consola.log ("Invocar el elemento principal");
,verdadero);
Utilizar el "infancia.addEventListener ()Método para invocar el elemento infantil en cada evento de clic del botón. Entonces, llame a la consola.Método log () para mostrar el resultado en la consola:
infancia.addEventListener ('Click', function ()
consola.log ("Invocar el elemento infantil");
);
Se puede observar que el evento ha sido capturado con éxito en cada clic del botón:
Ejemplo 2: Captura del evento del elemento de párrafo
Para capturar el evento del elemento de párrafo, utilice el " Primero Segundo Tercero Defina un "event_capturing ()"Función y use el siguiente código que se enumera a continuación: Llame a la función definida para mostrar en la pantalla: Eso se trata del evento que captura en JavaScript. Conclusión La captura del evento comienza a propagar el elemento del padre y se mueve hacia el objetivo/elemento infantil que inició el ciclo de eventos. Para realizar el evento capturando "addEventListener ()El método se puede usar. Esta publicación ha demostrado el método para realizar la captura de eventos.
función event_capturing ()
var all_p = documento.getElementsBytagName ("P");
para (var i = 0; i < All_p.length; i++)
All_p [i].addEventListener ("Haga clic", ClickHandler, True);
función clickHandler ()
alerta (esto.getAttribute ("id") + "evento manejado con éxito");