El objeto Event

Obtener información en un evento

Cuando se disparan ciertos eventos, hay casos en los que nos podría interesar obtener información relacionada con la naturaleza del evento. Por ejemplo, si estamos escuchando un evento de click de ratón, nos podría interesar saber con que botón del ratón se ha hecho click, en que punto concreto de la pantalla se ha hecho click, etc. Estos detalles se pueden obtener a través de un objeto event que se proporciona en la función asociada al evento.

El objeto event

Como se puede ver, en los ejemplos anteriores, la función asociada al evento no tenía parámetros:

const button = document.querySelector("button");
button.addEventListener("click", () => console.log("Hello!"));

Sin embargo, es posible indicarle un nombre a un primer parámetro, y en ese caso, contendrá la información del evento:

const button = document.querySelector("button");
button.addEventListener("click", (event) => console.log(event));

Si hacemos click en el botón, en la consola se nos mostrará la información del objeto event, que en nuestro ejemplo es un objeto event basado en PointerEvent, ya que click es un evento realizado con un puntero (de ratón). Contendrá algo parecido a lo siguiente:

// Objeto PointerEvent
{
pointerType: "mouse" // Tipo de puntero
altKey: false, // ¿La tecla ALT estaba presionada?
ctrlKey: false, // ¿La tecla CTRL estaba presionada?
shiftKey: false, // ¿La tecla SHIFT estaba presionada?
target: button, // Referencia al elemento que disparó el evento
clientX: 43, // Posición en eje X donde se hizo click
clientY: 16, // Posición en eje Y donde se hizo click
detail: 1, // Contador de veces que se ha hecho click
path: [], // Camino por donde ha pasado el evento
... // Otros...
}

Ten en cuenta que en este caso, se trata de un objeto PointerEvent porque el evento que estamos escuchando es un evento de puntero de ratón. Sin embargo, si utilizaramos otro evento, obtendríamos un objeto diferente.

Ejemplo (con PointerEvent)

Vamos a realizar un ejemplo con el evento click. Nuestro código nos permitirá hacer click con el ratón en cualquier parte de la pantalla. Nos mostrará los siguientes datos:

  • El número de veces consecutivas que hemos hecho click: event.detail
  • Las coordenadas de X donde has hecho click en la pantalla: event.x
  • Las coordenadas de Y donde has hecho click en la pantalla: event.y
<span></span>

<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
background: lightgrey;
user-select: none;
font-size: 2rem;
}
</style>

<script>
const span = document.body.querySelector("span");
const action = (event) => {
const { x, y, detail } = event;
span.textContent = `Has hecho ${detail} CLICK en las coordenadas (${x}x${y})`;
};
document.body.addEventListener("click", action);
</script>

En la función action realizamos una desestructuración para simplificar el código y modificamos el contenido de texto del elemento <span> cada vez que hacemos click.

Ejemplo (con KeyDown/KeyUp)

A continuación puedes ver un teclado visual hecho con CSS, creado en un directo de Twitch de ManzDev para mostrar un ejemplo de los eventos de teclado de Javascript, concretamente utilizando los eventos keydown y keyup (puedes pulsar F4 para activar el modo gamer):

Tabla de contenidos