BEDU Documentación Oficial

Comprensión de eventos

La interacción de JavaScript con HTML se maneja a través de eventos. Los eventos son acciones que ocurren cuando el usuario o el navegador manipula la página.

Algunos eventos comunes que ocurren con los sitios web, son cargas de páginas, clics de botones, pulsaciones de teclas, desplazamientos, presentaciones de formularios, cambio de tamaño de ventanas, por nombrar solo algunos.

Como desarrolladores, podemos usar estos eventos para ejecutar respuestas codificadas, como mostrar mensajes, validar datos, reaccionar a los clics de un botón y realmente cualquier otra cosa que podamos imaginar.

Al aprender sobre eventos, aprenderemos a unir todo y a hacer que nuestros sitios web sean interactivos.

Veamos ahora los controladores de eventos, los oyentes de eventos y los objetos de eventos.

¿Qué son los controladores de eventos y los oyentes de eventos?

Se desencadena un evento cada vez que se produce una acción en una página a la que JavaScript puede reaccionar, como cuando el usuario hace clic en un botón (evento de clic) o presiona una tecla (evento de pulsación de tecla).

Un controlador de eventos es una función de JavaScript que se ejecuta cuando se desencadena un evento.

Un oyente de eventos asocia la capacidad de respuesta a un elemento dado, lo que permite que el elemento espere o "escuche" a que se active el evento dado.

Los eventos se pueden asignar a elementos a través de controladores de eventos en línea, propiedades de controladores de eventos y oyentes de eventos. Echemos un vistazo a cada uno de estos métodos.

Controladores de eventos en línea

Comencemos con un ejemplo básico de un controlador de eventos en línea. El siguiente HTML consta de ay button un elemento p, queremos que el contenido del texto p cambie cuando el usuario haga clic en button.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Understanding Events</title>
</head>
<body>
<button onclick="changeText()">Click me</button>
<p>Change me!</p>
</body>
</html>

Como puede ver, hemos agregado un atributo llamado onclick a nuestro elemento button. El valor del atributo será una función de JavaScript que crearemos llamada changeText().

Aquí está nuestra salida hasta ahora:

¡Ahora creemos nuestra función! Lo agregaremos entre las etiquetas de script para este ejemplo.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Understanding Events</title>
</head>
<body>
<button onclick="changeText()">Click me</button>
<p>Change me!</p>
</body>
</html>

Nuestra changeText() función modifica la textContent de nuestro elemento p.

Entonces, cuando hace clic en el botón, se dispara el evento que ejecuta nuestra función changeText(), que altera el texto en nuestra etiqueta p.

Si bien los controladores de eventos en línea funcionan claramente, realmente no deberían usarse en la producción. Por la misma razón que no se debe usar CSS en línea, ¡es desordenado!

Y nuestro código será mucho más fácil de mantener si manejamos nuestro JavaScript completamente en archivos de script separados, en lugar de tener controladores en todo nuestro HTML.

Propiedades del controlador de eventos

Las propiedades del controlador de eventos funcionan de manera muy similar a los controladores en línea, excepto que establecemos la propiedad de un elemento en JavaScript, en lugar de en el atributo en nuestro HTML.

Nuestro HTML es el mismo, excepto que ahora estamos excluyendo el onclick="changeText()"que usamos anteriormente:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Understanding Events</title>
</head>
<body>
<button>Click me</button>
<p>Change me!</p>
</body>
</html>

Y nuestra función seguirá siendo similar también, excepto que ahora necesitamos acceder al buttonelemento en nuestro JavaScript. Simplemente accedemos onclick al igual que accedería style o ido cualquier otra propiedad elemento, a continuación, asignar la referencia de funciones.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Understanding Events</title>
</head>
<body>
<button>Click me</button>
<p>Change me!</p>
</body>
</html>

💡 Nota:

Los controladores de eventos no siguen la convención camelCase. ¡Observe que el código onclick no lo es onClick!

Ahora, cuando hace clic en el botón, activará el evento desde nuestra propiedad JavaScript:

Oyentes de eventos

Los oyentes de eventos buscan un evento en un elemento, en lugar de asignar el evento directamente a una propiedad en el elemento, usaremos el addEventListener()método para escuchar el evento.

addEventListener() toma dos parámetros obligatorios: el evento para escuchar y la función de devolución de llamada del oyente.

El HTML para nuestro detector de eventos seguirá siendo el mismo que en el ejemplo anterior. Y seguiremos usando la misma función changeText() que antes.

Sin embargo, ahora adjuntaremos el addEventListener()método al botón, de la siguiente manera:

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

💡 Nota:

En los primeros dos métodos, se hizo referencia a un evento de clic onclick, pero con los oyentes de eventos se denomina click. Cada oyente del evento deja caer la palabra.

Y ahora cuando hacemos clic en el botón, nuestra salida será:

Los oyentes de eventos parecen muy similares a las propiedades del controlador de eventos, sin embargo tienen una ventaja crucial. Podemos configurar múltiples oyentes de eventos en el mismo elemento.

Es más conciso usar funciones anónimas en lugar de referencias de funciones en escuchas de eventos. Las funciones anónimas son funciones que no tienen nombre, como:

// An anonymous function on an event listener
button.addEventListener('click', () => {
    p.textContent = "Will I change?";
})

También podríamos usar la removeEventListener()función para eliminar uno o todos los eventos de un elemento.

// Remove alert function from button element
button.removeEventListener('click', alertText);

También es útil saber que puede usar addEventListener() en el objeto document y window.

Los oyentes de eventos son actualmente la forma más común y preferida de manejar eventos en JavaScript. A continuación, veremos brevemente algunos de los eventos más comunes con los que es probable que trabajemos.

Eventos comunes

Hasta ahora nos hemos centrado en usar el evento click, mientras aprendemos sobre controladores de eventos en línea, propiedades de controladores de eventos y oyentes de eventos. Sin embargo, hay muchos más eventos disponibles para trabajar con nosotros, ¡así que echemos un vistazo!

Eventos de mouse

Los eventos del mouse se encuentran entre los eventos más utilizados. Se refieren a eventos que implican hacer clic con el botón del mouse o desplazarse y mover el puntero. Y, por supuesto, estos eventos también corresponden a la acción equivalente en un dispositivo táctil. Algunos ejemplos son:

  • click Se dispara cuando se presiona y suelta el mouse sobre un elemento.

  • dblclick Se activa cuando se hace clic dos veces en un elemento.

  • mouseenter Se dispara cuando un puntero entra en un elemento.

  • mouseleave Se dispara cuando un puntero deja un elemento.

  • mousemove Se dispara cada vez que un puntero se mueve dentro de un elemento.

Un click es en realidad un evento compuesto que se compone de eventos combinados mousedowny mouseupse disparan cuando se presiona o levanta el botón del mouse, respectivamente.

El uso mouseenter y mouseleave juntos recrea un efecto de desplazamiento que dura tanto tiempo como el puntero del mouse esté sobre el elemento.

Eventos de formulario

Los eventos de formulario son acciones que se relacionan con formularios, como inputelementos y si están seleccionados o no, y también el envío de formularios.

  • submit Se activa cuando se envía un formulario.

  • focus Se activa cuando un elemento (como una entrada) recibe el foco.

  • blur Se dispara cuando un elemento pierde el foco.

El enfoque se logra cuando se selecciona un elemento, por ejemplo, haciendo clic con el mouse o navegando a través de la tecla TAB.

JavaScript se usa a menudo para enviar formularios y enviar los valores a un lenguaje de fondo. La ventaja de usar JavaScript para enviar formularios es que no requiere una recarga de página para enviar el formulario, y JavaScript se puede usar para la validación del formulario.

Eventos de teclado

Los eventos de teclado se usan para manejar acciones de teclado, como presionar una tecla, levantar una tecla y mantener presionada una tecla.

  • keydown Se dispara una vez cuando se presiona una tecla.

  • keyup Se dispara una vez cuando se suelta una tecla.

  • keypress Se dispara continuamente mientras se presiona una tecla.

Aunque se ven similares, keydowny los keypresseventos no acceden exactamente a las mismas claves. Si bien keydownse reconoce cada clave que se presiona, keypress omitirá teclas que no producen un personaje, como por ejemplo SHIFT, ALT o DELETE.

Los eventos de teclado también tienen propiedades específicas para acceder a teclas individuales.

Si un parámetro, conocido como un objeto event, se pasa al detector de eventos, podemos acceder a más información sobre la acción que tuvo lugar. Tres propiedades que se refieren a objetos de teclado incluyen keyCode, key, y code.

Por ejemplo, si el usuario presiona la tecla a en su teclado, aparecerán las siguientes propiedades relacionadas con esa tecla:

  • keyCode Un número perteneciente a la tecla, por ejemplo, "65"

  • key Representa el nombre del carácter, por ejemplo, "a"

  • code Representa la tecla física que se está presionando, por ejemplo, "Tecla A"

Objetos de evento

El Eventobjet consta de propiedades y métodos a los que pueden acceder todos los eventos. Además del Eventobjet genérico , cada tipo de evento tiene sus propias extensiones, como KeyboardEventy MouseEvent.

El Eventobjet se pasa a través de una función de escucha como parámetro. Por lo general, se escribe como evento e. Podemos acceder a la codepropiedad del keydownevento para replicar los controles del teclado de un juego de PC.

Probémoslo con el siguiente HTML:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Event Objects</title>
</head>
<body>
<p></p>
</body>
</html>

Ábralo en su navegador y pegue el siguiente código en su consola de desarrollador:

// Pass an event through to a listener
document.addEventListener('keydown', event => {
    var element = document.querySelector('p');
// Set variables for keydown codes
    var a = 'KeyA';
    var s = 'KeyS';
    var d = 'KeyD';
    var w = 'KeyW';
// Set a direction for each code
    switch (event.code) {
        case a:
            element.textContent = 'izquierda';
            break;
        case s:
            element.textContent = 'abajo';
            break;
        case d:
            element.textContent = 'derecha';
            break;
        case w:
            element.textContent = 'arriba';
            break;
    }
});

Cuando se pulsa una de las teclas a, s, d, o w, verá la salida de este modo:

Estoy seguro de que ahora está viendo que al tener este control sobre cómo responde el navegador, podemos construir sitios web cada vez más dinámicos.

En esta sección final, veremos una de las propiedades de eventos más utilizadas: la propiedad target.

Trabajemos con el siguiente HTML:

<! DOCTYPE html> 
<html lang = "en-US"> 
<head> 
    <title> Target </title> 
</head> 
<body>
  <section> 
    <div id = "one"> Uno </div> 
    <div id = "two"> Dos </div> 
    <div id = "three"> Tres </div> 
  </section>
</body> 
</html>

Utilizando event.target dentro de la Consola de desarrollador de nuestro navegador, podemos colocar un detector de eventos en el elemento section externo y obtener el elemento más profundamente anidado.

const section = document.querySelector('section');
// Print the selected target
section.addEventListener('click', event => {
    console.log(event.target);
});

Al hacer clic en cualquiera de nuestros div elementos, se devolverá la salida del elemento específico relevante a la Consola utilizando event.target. Esto es extremadamente útil, ya que le permite colocar solo un detector de eventos que se puede utilizar para acceder a muchos elementos anidados.

Con el objeto Event, podemos configurar respuestas relacionadas con todos los eventos, incluidos eventos genéricos y extensiones más específicas.

Conclusión

Los eventos son acciones que tienen lugar en un sitio web, como hacer clic, desplazarse, enviar un formulario, cargar una página o presionar una tecla en el teclado.

JavaScript se vuelve verdaderamente interactivo y dinámico cuando podemos hacer que los sitios web respondan a las acciones que ha realizado el usuario.

¡Felicidades! 🎉

Has concluido con éxito, el curso de Javascript desde cero, no te olvides de contarnos que tal te ha parecido nuestro contenido respondiendo el siguiente formulario.

¡Hasta la próxima! 👋

AnteriorIntroducción

Última actualización