Información de 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 en cuestión. Por ejemplo, si estamos escuchando un evento de tipo click de ratón, nos podría interesar saber:

• ¿Con qué botón del ratón se ha hecho click?
• ¿En qué punto concreto de la pantalla se ha hecho click?
• ¿Se estaba pulsando la tecla CTRL mientras se hacía click?

Estos podrían ser algunos detalles que nos interesaría obtener de un evento. Vamos a analizar como hacerlo.

El objeto Event

Hasta ahora, al trabajar con addEventListener(), hemos indicado como segundo parámetro de la función, una arrow function sin parámetros. Sin embargo, podemos definir un parámetro (con el nombre que queramos, por ejemplo, event) que nos va a proporcionar información interesante sobre el evento:

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log(event);   // PointerEvent
});

Observa que simplemente nos muestra que el event definido es un objeto PointerEvent (que a su vez, está basado en Event). Esto ocurre porque los navegadores consideran que los eventos click se realizan con dispositivos apuntadores (generalmente, un ratón).

Veamos que contiene el objeto PointerEvent de nuestro ejemplo anterior:

// Objeto PointerEvent
{
  type: "click",         // Nombre del evento
  target: button,        // Referencia al elemento que disparó el evento
  currentTarget: button, // Referencia al elemento que maneja el evento
  pointerType: "mouse"   // Tipo de dispositivo
  ctrlKey: false,        // ¿La tecla CTRL estaba presionada?
  altKey: false,         // ¿La tecla ALT estaba presionada?
  shiftKey: false,       // ¿La tecla SHIFT estaba presionada?
  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
  ...                    // Otros...
}

Ten en cuenta que en este caso, se trata de un objeto PointerEvent porque el evento que estamos escuchando es un evento click de un dispositivo que permite apuntar. Sin embargo, si utilizaramos otro evento, posiblemente obtendríamos un objeto diferente.

Propiedades del evento

Veamos algunas de la propiedades comunes, que están disponibles en cualquier tipo de evento. Ampliemos un poco la escucha del evento anterior, donde vamos a observar el contenido de cada una de las siguientes propiedades básicas:

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  const { type, timeStamp, isTrusted } = event;
  console.log({ type, timeStamp, isTrusted });
});

Como se puede ver, desestructuramos las tres propiedades siguientes del objeto event y las mostramos a través de una sentencia console.log(), de modo que podamos ver su contenido.

Analicemos cada una de ellas.

const currentTime = new Date().getTime();
const eventTime = new Date(currentTime - event.timeStamp);