Cómo agregar un controlador de eventos al objeto de la ventana en JavaScript

La ventana de su navegador que se crea automáticamente se conoce como un objeto de ventana. Se considera el objeto del navegador, no de Javascript. Si está leyendo este artículo en su navegador favorito, la pestaña actual representa el objeto de la ventana. El objeto de la ventana puede usar el ancho, la altura, las alertas y las indicaciones de Windows.

Con la ayuda del addEventListener () Método, un programador de JavaScript puede agregar manipuladores de eventos a un objeto de ventana específico. Este método le permite controlar la reacción para el evento correspondiente. El JavaScript se aísla 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 tiene control sobre el marcado HTML.

Este artículo discutirá el procedimiento para agregar controladores de eventos al objeto de la ventana en un programa JavaScript. Además, los ejemplos relacionados con el uso del método addEventListener () también se demostrarán. Entonces, comencemos!

Agregar controladores de eventos al objeto de la ventana en JavaScript

Como programador de JavaScript, puede utilizar el método AddEventListener () para agregar un oyente de eventos a cualquier objeto HTML. 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 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 último parámetro es opcional que puede ser capturar o burbujear para eventos.

Ejemplo 1: Agregar un controlador de eventos al objeto de la ventana en JavaScript

Agregaremos el método addEventListener () al "ventana"Objeto en el siguiente ejemplo. 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 podemos pasar un "evento"Objeto al método addEventListener (). El "eventoEl objeto comprende toda la información relacionada con el evento Mousedown:

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:

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

Ahora, haga clic a la izquierda en la pantalla y verá la siguiente alerta:

Ejemplo 2: Agregar un controlador de eventos para el evento de clic del mouse en JavaScript

Este ejemplo le mostrará el procedimiento de agregar un controlador de eventos para el mouse "hacer clic"Evento en JavaScript. En este ejemplo, no estamos agregando evento directamente al objeto de la ventana sino a su objeto de documento.

En primer lugar, agregaremos un encabezado con el

etiqueta, un párrafo con el

etiqueta y un botón usando la etiqueta:

Agregue un controlador de eventos 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 clic en mí

El método GetElementByID se invocará para encontrar y obtener el botón teniendo "botón 1" identificación. Después de eso, el "addEventListener ()"El método agregará un"hacer clic"Evento que activará el"Mostrar fecha()" método:

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

Conclusión

Usando el método addEventListener (), puede agregar un controlador 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 y un objeto de ventana único también puede tener múltiples manejadores de eventos. Este artículo sobre el procedimiento para agregar controladores de eventos al objeto de la ventana en un programa JavaScript y los ejemplos relacionados con el uso del método AddEventListener () también se demuestran.