Introducción a los eventos — JS: API del DOM

• Cómo probar
• Objeto de evento
• Acción por defecto
• Competencia entre eventos
• Errores comunes

Los sitios web en el navegador, la terminal y otros sistemas interactivos funcionan de la misma manera.

Se cargan y luego entran en modo de espera, esperando a que el usuario realice alguna acción. Estas acciones incluyen hacer clic, escribir texto, mover el mouse, combinar teclas, etc.

Desde el punto de vista del código, existen eventos que representan todas las acciones. Veamos algunos eventos comunes:

• click
• submit
• keyup
• keydown
• focus
• contextmenu
• mouseover
• mousedown
• mouseup

Los eventos son muy detallados. Incluso la entrada de una letra se divide en dos eventos: presionar la tecla y soltarla. Además, podemos distinguir las teclas de acceso rápido de la entrada normal utilizando el evento keypress.

Cada evento estará asociado a un elemento específico en el DOM. Imagina que necesitas agregar un nuevo comportamiento. Debes encontrar cualquier elemento y agregar un callback con addEventListener(). El programa lo llamará cuando ocurra el evento:

<button id="myButton"></button>

const button = document.getElementById('myButton');

// Agregamos un controlador que se llamará cuando se haga clic en el botón
button.addEventListener('click', () => alert('¡Boom 1!'));

// Agregamos un segundo controlador
button.addEventListener('click', () => alert('¡Boom 2!'));

Cada controlador de eventos es una función que se llama cuando ocurre el evento. Estos controladores se ejecutan uno tras otro en el orden en que se definieron.

Si es necesario, podemos eliminar un controlador, aunque esto ocurre raramente en la práctica:

const button = document.getElementById('myButton');

const handler = () => alert('¡Boom 1!');
button.addEventListener('click', handler);

// Es importante pasar exactamente la misma función por referencia
button.removeEventListener('click', handler);

Podemos disparar eventos programáticamente. Por ejemplo, esto se aplica a focus.

Imagina que abres un chat y quieres escribir un mensaje, pero el texto no aparece. Necesitas enfocarte en el campo de entrada para escribir el texto.

Por defecto, esto no sucede, y aquí es donde entramos nosotros:

const input = document.getElementById('textInput');
// El cursor aparece en el campo de entrada
// Intenta cambiar de canal
// En la mayoría de los servicios de mensajería, verás que el campo de entrada se enfoca 
// automáticamente
input.focus();

Cómo probar

Para comprender cómo funcionan los eventos, debes usarlos regularmente en el navegador. La forma más fácil de hacerlo es la siguiente:

1. Abre la consola en cualquier sitio web. Observa dónde se encuentran los elementos con los que deseas trabajar, como botones o formularios.
2. Selecciona cualquier elemento que desees manipular. Para mayor simplicidad, puedes seleccionar body.
3. Agrega un controlador a ese elemento.
4. Dispara el evento y observa la reacción.

const element = document.body;
element.addEventListener('click', () => console.log('wow!'));
// Ahora puedes hacer clic en cualquier parte del sitio web
wow!

// ¿Qué pasa si necesitas un elemento de formulario?

// Selecciona el primer input que encuentres
const element2 = document.querySelector('input');
// Agrega un controlador y muestra en la consola lo que necesites
element2.addEventListener('keyup', () => console.log('¡presionado!'));

De esta manera, puedes probar cualquier evento en cualquier sitio web.

Objeto de evento

Cada evento que ocurre tiene información asociada que depende del tipo de evento.

Por ejemplo, el evento click incluye el clic y sus coordenadas, que son el punto en la pantalla. Esta información está disponible a través del objeto de evento que se pasa al controlador de eventos. Los objetos de evento siempre se pasan al controlador como un solo parámetro:

<div id="myElement">¡Boom!</div>

const button = document.getElementById('myElement');

button.addEventListener('click', (event) => {
  // Un objeto común
  console.log(event);
  // Las coordenadas del punto donde se hizo clic
  console.log(event.clientX);
  console.log(event.clientY);
});

Cada clic en el botón creará un nuevo objeto event con sus propios valores correspondientes al evento actual.

El objeto event está lleno de muchas propiedades que son más fáciles de explorar directamente en el navegador.

Diferentes eventos tienen propiedades comunes y específicas, por ejemplo:

• el clic tiene coordenadas
• la pulsación de una tecla tiene su valor

Para obtener más información sobre las propiedades, consulta la documentación / MDN Web Docs.

Propiedades comunes:

• event.target - el elemento DOM en el que ocurrió el evento. A través de él, es más fácil acceder a los datos que pueden ser necesarios después del evento.
• event.type - el nombre del evento, por ejemplo, click, keyup, etc.

Para un ejemplo, veamos la tarea de validar una contraseña ingresada. Resaltaremos el campo de entrada con un borde rojo si la contraseña es demasiado corta:

See the Pen js_dom_events by Códica (@codica_la) on CodePen.

Acción por defecto

Algunos elementos del navegador tienen acciones por defecto que se ejecutan cuando ocurren ciertos eventos. Por ejemplo, supongamos que hemos agregado un controlador para hacer clic en un enlace. Al hacer clic, de repente nos lleva a otra página, la que se especifica en el atributo href.

Esto es un ejemplo de una acción por defecto a la que no afecta la presencia de controladores. Para cancelar esta acción, debemos llamar al método event.preventDefault() dentro del controlador:

<a href="#" id="myElement">¡Boom!</a>

const button = document.getElementById('myElement');

button.addEventListener('click', (e) => {
  // Si no hacemos esto, el navegador cargará una nueva página
  e.preventDefault();
  alert(e.target.textContent);
});

Las siguientes son acciones por defecto de algunos elementos:

• Hacer clic en un enlace nos lleva a la página especificada en el atributo href.
• Hacer clic en un botón con el tipo submit comienza el envío del formulario al servidor.
• Girar la rueda del mouse en un textarea desplaza el texto si no cabe.
• Llamar al menú contextual con el clic derecho del mouse.

Competencia entre eventos

Durante la ejecución de los controladores, pueden ocurrir nuevos eventos, tanto de acciones del usuario como de los propios controladores. Algunos eventos siempre ocurren en bloque, como mouseup y click.

Esto no significa que la ejecución del código se cambie inmediatamente para manejar estos eventos. En cambio, los eventos se colocan en una cola y se ejecutan secuencialmente.

Sin embargo, algunos eventos se manejan de inmediato. Esto se aplica a eventos generados programáticamente, como focus.

Surge una pregunta natural: "¿Qué sucede con la página durante la ejecución del controlador?". Aquí hay varias opciones.

Supongamos que el controlador ejecuta código de manera síncrona, como cálculos. En este momento, todo lo demás se bloquea y la página se congela. Si este comportamiento dura demasiado tiempo, algunos navegadores se bloquean, mientras que otros sugieren cerrar la pestaña. Por esta razón, los controladores deben realizar su tarea lo más rápido posible.

¿Y si la tarea es asíncrona, como realizar una solicitud al servidor? En este caso, todo sigue funcionando correctamente porque las solicitudes HTTP no bloquean la ejecución del código.

El sistema de eventos solo es posible en código asíncrono. Básicamente, cuando se carga la página, se inicializan y se agregan los controladores. Por lo general, no se ejecuta más código. Toda la página está esperando acciones del usuario.

Errores comunes

Muy a menudo, los principiantes se confunden con las funciones. En lugar de pasar la función en sí misma, pasan el resultado de llamar a la función al controlador:

const button = document.getElementById('myElement');
const handler = () => {
  alert('¡Clic!');
};

button.addEventListener('click', handler());

La función handler() se ejecuta cuando se adjunta el controlador al evento. En lugar de pasar la función en sí misma, se pasará el resultado de llamar a handler().