Método del oyente de eventos DOM en JavaScript

Puede agregar el oyente del evento a los elementos HTML DOM con la ayuda del addEventListener () método. El método addEventListener () le permite controlar la reacción para el evento correspondiente. El JavaScript está aislado del texto HTML cuando utiliza el método AddEventListener (), lo que facilita la comprensión y le permite agregar oyentes de eventos incluso si no controla el marcado HTML.

Este artículo discutirá el Oyente de eventos DOM Método en JavaScript. Explicaremos el uso del método de oyente de eventos DOM para agregar manejadores individuales y múltiples a los elementos HTML. Además, también se demostrarán ejemplos relacionados con el burbujeo de eventos y la captura de eventos. Entonces, comencemos!

Método del oyente de eventos DOM en JavaScript

Como programador de JavaScript, puede utilizar el método DOM AddEventListener () para agregar un oyente de eventos en cualquier objeto HTM, como los objetos de la ventana, los elementos HTML, el documento HTML o el objeto XMLHTTPREQUEST.

Existe otro "en" Propiedad JavaScript que se usa para el mismo propósito; Sin embargo, no es muy útil en comparación con el método addEventListener () porque el método DOM AddEventListener () le permite agregar múltiples oyentes de eventos en un objeto de ventana o elemento HTML.

Sintaxis del método addEventListener ()

objeto.addEventListener (evento, función, useCapture);

Aquí, el primer parámetro, "evento" se agrega para especificar el evento para el que desea agregar el controlador de eventos; el segundo parámetro, "función" invoca la función que se ejecutará cuando ocurra el evento especificado. El tercer parámetro es opcional; donde tienes que agregar"Captura de eventos" o "Burbujeante de eventos".

Ejemplo 1: Uso del método DOM Evener Listener para agregar un controlador de eventos en JavaScript

Este ejemplo le mostrará el procedimiento de agregar un método de oyente de eventos DOM para el evento "Click" del mouse en JavaScript. En primer lugar, agregaremos un encabezado con el

etiqueta, un párrafo con el

etiqueta y un botón usando la etiqueta:

Método del oyente de eventos DOM en JavaScript

Este programa JavaScript utilizó el método AddEventListener ()

También hemos agregado una identificación "botón 1" para nuestro "Haz click en mi" botón:

Haz click en mi

El método GetElementById se invocará para encontrar y obtener el botón de tener "botón 1" identificación. Después de eso, el "AddEventListener ()" El método agregará un "hacer clic" evento que desencadenará el "Mostrar fecha()" 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:

Después de obtener la salida, haga clic en el "Haz click en mi" botón para ver la hora y la fecha actuales:

Ejemplo 2: Uso del método DOM Evener Listener para agregar múltiples controladores de eventos en JavaScript

JavaScript también ofrece la funcionalidad para agregar múltiples controladores de eventos para el mismo objeto. Para demostrar su procedimiento, hemos escrito el siguiente programa JavaScript con un encabezado, párrafo y un botón que tiene "botón 1" identificación. Tenga en cuenta que agregaremos múltiples manejadores de eventos para el "botón" Elemento HTML:

Agregue un controlador de eventos en JavaScript

Este programa JavaScript utilizó el método AddEventListener ()

Haz click en mi

En el siguiente paso, haremos un "a" objeto que encontrará y obtendrá el botón con "botón 1" ID a través de la invocación del documento.Método GetElementById ():

Golpea el "Haz click en mi" botón, y obtienes dos alertas en tu navegador, una tras otro:

Ejemplo 3: Uso del método de escucha de eventos DOM para agregar el controlador de eventos al objeto de la ventana en JavaScript

En el siguiente ejemplo, estamos agregando el método addEventListener () al "ventana" objeto. El método agregado AddEventListener () se activará cuando un usuario realice el "ratón hacia abajo" acción:

JavaScript addEventListener ()

Este ejemplo usa el método addEventListener () en el objeto de la ventana.

También pasaremos un "evento" Objeto al método addEventListener (). El "evento" El objeto comprende toda la información relacionada con el ratón hacia abajo evento:

La ejecución del programa JavaScript anterior mostrará el siguiente resultado:

Ahora, presione el "izquierda" botón del mouse sobre el elemento seleccionado y verá la siguiente alerta:

Burbujeo de eventos en JavaScript

En JavaScript, el burbujeo de eventos es un evento que burbujea del objetivo o los elementos más profundos de sus padres, luego sigue la parte inferior hacia el enfoque superior y mueve el flujo de control 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":

Niño

Después de asignar los elementos HTML creados utilizando el "documento.QuerySelector () " Método, agregaremos un oyente de eventos a ambos Div "Parentralement" y su anidada "Infancia" botón. La función pasada en el "AddEventListener ()" mostrará la cadena agregada en el "consola.registro()" método:

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. Todo esto sucede 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:

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 objetivo o el elemento más externo 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:

Niño

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 del evento:

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:

Conclusión

Usando el método DOM AddEventListener (), puede agregar un oyente de eventos al objeto de la ventana y los elementos HTML. Sin sobrescribir los controladores de eventos existentes, el método JavaScript addEventListener () asigna un controlador de eventos al objeto específico. Además, un objeto de ventana único también puede tener múltiples manejadores de eventos. Este artículo sobre el método de oyente de eventos DOM en JavaScript. También explicamos el uso del método de oyente de eventos DOM para agregar manejadores individuales y múltiples a los elementos HTML. Además, también se demuestran ejemplos relacionados con el burbujeo de eventos y la captura de eventos.