Cómo Usar Detectores De Eventos En Javascript

El manejo de eventos es muy importante para las aplicaciones interactivas. Aprenda a responder a los eventos del mouse y del teclado usando JavaScript.

Muchas aplicaciones web se basan en algún tipo de evento para realizar una función. En algún momento, los humanos interactúan con interfaces que generan eventos. Estos eventos impulsados por humanos generalmente dependen de periféricos como un mouse o un teclado.

Cuando un dispositivo genera un evento, el programa puede escuchar el evento y saber cuándo realizar una acción específica. En este tutorial, aprenderá cómo escuchar eventos usando JavaScript.

¿Qué es la programación de eventos?

La programación basada en eventos es el nombre de un paradigma que se basa en la ejecución de eventos para realizar funciones. Es posible crear programas de eventos en cualquier lenguaje de programación de alto nivel. Sin embargo, la programación basada en eventos es más común en lenguajes como JavaScript que están integrados con interfaces de usuario.

¿Qué es un detector de eventos?

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

Creando detectores de eventos usando JavaScript

Puede escuchar eventos en cualquier elemento DOM. JavaScript es detector de eventos adicional () Una función a la que se puede llamar desde cualquier elemento de una página web. tanto detector de eventos adicional () la función es objetivo del evento Interacción. Todos los objetos que admiten eventos implementan esta interfaz. Esto incluye Windowss, documentos y elementos de página individuales.

La estructura básica de la función addEventListener() es la siguiente.

element.addEventListener("event", functionToExecute);

Dónde:

• tanto Elemento Puede representar cualquier etiqueta HTML (desde botones hasta párrafos).
• tanto " evento " Una cadena que especifica una operación específica y reconocida.
• tanto ejecución de funciones Una referencia a una función existente.

Vamos a crear la siguiente página web que contiene algunos elementos HTML.

!DOCTYPE html 
html 
head 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 titleDocument/title 
/head 
body 
 div 
 h1Welcome/h1 
 p 
 Hello, welcome to my website. 
 /p 
 buttonLearn More/button 
 /div 
 div 
 h2 class=subheadingUser Info/h2 
 label for="username"User Name: /label 
 input 
 buttonSubmit/button 
 /div 
 script src="app.webp"/script 
/body 
/html

El código HTML anterior es aplicación.webp. tanto aplicación.webp El archivo contiene código para configurar detectores de eventos. Entonces, si desea iniciar un proceso específico cada vez que el usuario haga clic en el primer botón de su página web, este es el archivo que creará.

Archivo app.webp

document.querySelector('.btn').addEventListener("click", clickDemo) 
function clickDemo(){ 
 console.log("Hi there") 
}

El código JavaScript anterior accede al primer botón de la página mediante: selector de consultas() función. Luego agregue un detector de eventos a ese elemento con: detector de eventos adicional () Camino. El evento específico que recibe se llama "clic". Cuando el botón dispara este evento, el oyente haga clic en demostración () función.

Temas relacionados: Aprenda a usar los selectores DOM

Tanto haga clic en demostración () La función imprime "Hola" en la consola del navegador. Debería ver esta salida en la consola cada vez que se hace clic en el botón.

Salida de evento de "clic"

¿Qué son los eventos de ratón?

JavaScript es evento del ratón Una interfaz que representa eventos que ocurren como resultado de la interacción usuario-ratón. Se utilizan múltiples eventos. evento del ratón Interacción. Estos eventos incluyen:

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

Tanto hacer clic Ocurre cuando el usuario presiona y suelta el botón del mouse mientras el puntero está sobre el elemento. Esto es exactamente lo que sucedió 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, significa doble clic. Esto se activa cuando el usuario hace clic en el botón del mouse dos veces seguidas. digno de mención detector de eventos adicional () El punto es que se puede usar para asignar múltiples detectores de eventos a un solo elemento.

Agregar evento dblclick al primer botón

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo) 
function dblclickDemo(){ 
 alert("This is a demonstration of how to create a double-click event") 
}

Agregar el código anterior a su archivo app.webp crea efectivamente un segundo detector de eventos para el primer botón en su página web. Entonces, cuando hago doble clic en el primer botón, el navegador genera la siguiente advertencia:

Puede ver la advertencia generada en la imagen de arriba y notar que hay dos salidas "Hola" más en la consola. Esto se debe a que un evento de doble clic es una combinación de dos eventos de clic y tiene detectores de eventos para ambos. hacer clic y dblclick evento.

Los nombres de otros eventos del mouse en la lista describen su comportamiento. tanto movimiento del ratón El evento se activa cada vez que el usuario mueve el mouse mientras el cursor está sobre el elemento. tanto ratón arriba Los eventos se generan cuando el usuario presiona y suelta el botón de un elemento.

¿Qué son los eventos de teclado?

JavaScript es evento de teclado Interacción. Escucha las interacciones entre el usuario y el teclado. Hace mucho tiempo evento de teclado Se realizaron tres tipos de eventos. Sin embargo, JavaScript ha quedado obsoleto desde entonces. presione la tecla evento.

Por lo tanto tecla Arriba y tecla abajo Estos son los únicos dos eventos de teclado recomendados que necesita. tanto tecla abajo Un evento se dispara cuando el usuario presiona una tecla. tecla Arriba Los eventos se generan cuando el usuario los libera.

Volviendo al ejemplo de HTML anterior, el mejor lugar para agregar un detector de eventos de teclado es ingresar Elemento.

Agregue un detector de eventos de teclado al archivo app.webp

let greetings = document.querySelector('p'); 
document.querySelector('input').addEventListener("keyup", captureInput) 
function captureInput(e){ 
 greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`) 
}

El código de arriba es selector de consultas() La capacidad de moverse a un párrafo y ingresar elemento en la página. luego llama detector de eventos adicional () Camino ingresar elemento, oyente tecla Arriba evento. cada vez tecla Arriba evento ocurre, captura de entrada () La función toma el valor clave y lo agrega a un párrafo en la página. tanto mi Los parámetros representan eventos que JavaScript asigna automáticamente. Este objeto de evento tiene una propiedad, target, que es una referencia a algo con lo que el usuario ha interactuado.

En este ejemplo, la etiqueta adjunta a la etiqueta es ingresar El campo solicita su nombre de usuario. Si ingresa su nombre en ingresar Complete los campos y su página web se verá así:

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

AddEventListener captura cualquier tipo de interacción del usuario

En este articulo detector de eventos adicional () Varios eventos de mouse y teclado que se pueden usar con métodos. En este punto, sabe cómo escuchar ciertos eventos y cómo crear funciones que respondan a ellos.

Tanto Oyentes de eventos adicionales Sin embargo, proporciona funcionalidad adicional a través de un tercer parámetro. Puede usarlo para controlar el burbujeo de eventos (el orden en que los eventos pasan los elementos al padre o al hijo).

Si quieres conocer otros artículos parecidos a Cómo Usar Detectores De Eventos En Javascript puedes visitar la categoría Programación.