Muchas aplicaciones web dependen de algún tipo de evento para llevar a cabo sus funciones. En algún momento, un humano interactúa con su interfaz, lo que genera un evento. Estos eventos impulsados ​​por humanos generalmente dependen de un dispositivo periférico, como un mouse o un teclado.

Cuando un dispositivo crea un evento, el programa puede escucharlo para saber cuándo llevar a cabo un comportamiento específico. En este tutorial, aprenderá a escuchar eventos usando JavaScript.

¿Qué es la programación dirigida por eventos?

La programación dirigida por eventos es el nombre de un paradigma que se basa en la ejecución de un evento para realizar sus funciones. Es posible crear un programa basado en eventos en cualquier lenguaje de programación de alto nivel. Pero la programación basada en eventos es más común en lenguajes como JavaScript que se integran con una interfaz de usuario.

¿Qué es un detector de eventos?

Un detector de eventos es una función que inicia un proceso predefinido si ocurre un evento específico. Entonces, un detector de eventos "escucha" una acción, luego llama a una función que realiza una tarea relacionada. Este evento puede tomar una de muchas formas. Los ejemplos comunes incluyen eventos de mouse, eventos de teclado y eventos de ventana.

Creación de un detector de eventos usando JavaScript

Puede escuchar eventos en cualquier elemento en el DOM. JavaScript tiene un agregarEventListener() función a la que puede llamar en cualquier elemento de una página web. El agregarEventListener() La función es un método de la Objetivo de evento interfaz. Todos los objetos que admiten eventos implementan esta interfaz. Esto incluye la ventana, el documento y los elementos individuales de la página.

La función addEventListener() tiene la siguiente estructura básica:

elemento.addEventListener("evento", functionToExecute);

Donde:

• el elemento puede representar cualquier etiqueta HTML (desde un botón hasta un párrafo)
• el "evento" es una cadena que nombra una acción específica y reconocida
• el función para ejecutar es una referencia a una función existente

Vamos a crear la siguiente página web que tiene algunos elementos HTML:

Bienvenidos


 Hola, bienvenidos a mi sitio web.


Aprende más





Información de usuario

Nombre de usuario: 

Entregar

El código HTML anterior crea una página simple que enlaza con un archivo JavaScript llamado aplicación.js. El aplicación.js El archivo contendrá el código para configurar los detectores de eventos. Por lo tanto, si desea iniciar un proceso específico cada vez que un usuario haga clic en el primer botón de la página web, este es el archivo para crearlo.

El archivo app.js

document.querySelector('.btn').addEventListener("click", clickDemo)
función hacer clic en demostración(){
 consola.log("Hola")
}

El código JavaScript anterior accede al primer botón de la página mediante el selector de consulta() función. Luego agrega un detector de eventos a este elemento usando el agregarEventListener() método. El evento específico que escucha tiene el nombre "clic". Cuando el botón dispara ese evento, el oyente llamará al haga clic en demostración () función.

Relacionado: Aprenda a usar los selectores DOM

El haga clic en demostración () La función imprime "Hola" en la consola del navegador. Cada vez que haga clic en el botón, debería ver este resultado en su consola.

La salida del evento "clic"

¿Qué son los eventos de ratón?

JavaScript tiene un RatónEvento interfaz que representa eventos que ocurren debido a la interacción de un usuario con su mouse. Varios eventos utilizan el RatónEvento interfaz. Estos eventos incluyen lo siguiente:

• hacer clic
• dblclick
• movimiento del ratón
• ratón sobre
• ratón fuera
• ratón arriba
• ratón hacia abajo

El hacer clic El evento ocurre cuando un usuario presiona y suelta un botón del mouse mientras su puntero está sobre un elemento. Esto es exactamente lo que ocurrió en el ejemplo anterior. Como puede ver en la lista anterior, los eventos del mouse pueden tomar muchas formas.

Otro evento común del ratón es dblclick, que significa doble clic. Esto se activa cuando un usuario hace clic en un botón del mouse dos veces en rápida sucesión. Una cosa notable sobre el agregarEventListener() La función es que puede usarla para asignar múltiples detectores de eventos a un solo elemento.

Agregar un evento dblclick al primer botón

documento.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
función dblclickDemo(){
 alert("Esta es una demostración de cómo crear un evento de doble clic")
}

Agregar el código anterior al archivo app.js creará efectivamente un segundo detector de eventos para el primer botón en la página web. Entonces, al hacer clic dos veces en el primer botón, se creará la siguiente alerta en el navegador:

En la imagen de arriba, verá la alerta que se genera, y también verá que hay dos salidas más de "Hola" en la consola. Esto se debe a que un evento de doble clic es una combinación de dos eventos de clic y hay detectores de eventos tanto para el hacer clic y el dblclick eventos.

Los nombres de los otros eventos del mouse en la lista describen su comportamiento. El movimiento del ratón El evento ocurre cada vez que un usuario mueve el mouse cuando el cursor está sobre un elemento. El ratón arriba El evento ocurre cuando un usuario mantiene presionado un botón sobre un elemento y luego lo suelta.

¿Qué son los eventos de teclado?

JavaScript tiene un TecladoEvento interfaz. Esto escucha las interacciones entre un usuario y su teclado. En el pasado, TecladoEvento tenía tres tipos de eventos. Sin embargo, JavaScript desde entonces ha desaprobado el pulsación de tecla evento.

Entonces el tecla Arriba y pulsación de tecla events son los únicos dos eventos de teclado recomendados, que son todo lo que necesita. El pulsación de tecla El evento ocurre cuando un usuario presiona una tecla y el tecla Arriba El evento ocurre cuando un usuario lo libera.

Volviendo al ejemplo de HTML anterior, el mejor lugar para agregar un detector de eventos de teclado es en el aporte elemento.

Agregar un detector de eventos de teclado al archivo app.js

let saludos = document.querySelector('p');
documento.querySelector('entrada').addEventListener("keyup", captureInput)
función capturarEntrada (e){
 saludos.innerText = (`Hola ${e.target.value}, bienvenido a mi sitio web.`)
}

El código anterior utiliza el selector de consulta() función para acceder al párrafo y aporte elementos en la página. Luego llama al agregarEventListener() método en el aporte elemento, que escucha el tecla Arriba evento. Siempre que un tecla Arriba ocurre el evento, el capturarEntrada() La función toma el valor clave y lo agrega al párrafo en la página. El mi El parámetro representa el evento, que JavaScript asigna automáticamente. Este objeto de evento tiene una propiedad, target, que es una referencia al elemento con el que interactuó el usuario.

En este ejemplo, la etiqueta adherida al aporte campo solicita un nombre de usuario. Si escribe su nombre en el campo de entrada, la página web se verá así:

El párrafo ahora contiene el valor de entrada que, en el ejemplo anterior, es "Jane Doe".

addEventListener captura todo tipo de interacción del usuario

Este artículo te presentó a la agregarEventListener() método, así como varios eventos de mouse y teclado que puede usar con él. En este punto, sabe cómo escuchar un evento en particular y cómo crear una función que responda a él.

El agregarEventListener proporciona capacidad adicional, sin embargo, a través de su tercer parámetro. Puede usarlo para controlar la propagación de eventos: el orden en que los eventos se mueven de elementos a sus padres o hijos.

Comprender la propagación de eventos en JavaScript

Los eventos son una poderosa característica de JavaScript. Comprender cómo un navegador web los plantea frente a los elementos es clave para dominar su uso.

Leer siguiente

Sobre el Autor