El objeto Event

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 que botón del ratón se ha hecho click, en que punto concreto de la pantalla se ha hecho click, etc.

El objeto Event

Estos detalles se pueden obtener de forma opcional a través de un objeto event que se proporciona en la función asociada al evento. Para ello, sólo es necesario indicar un primer parámetro en la función que gestiona el evento, y dicho parámetro, será de tipo evento con dicha información asociada.

Observa el siguiente ejemplo de código:

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

Simplemente se trata de una función que escucha los eventos de tipo click en un <button> del HTML. Observa que la función asociada tiene el parámetro event. Si hacemos click en el botón, en la consola se nos mostrará la información de este evento, que en nuestro ejemplo anterior está basado en PointerEvent, ya que click es un evento realizado con un puntero (generalmente, de ratón).

Dicho evento contiene una serie de propiedades interesantes a la hora de trabajar con el evento en cuestión, y dependen del tipo de evento. Por ejemplo, en el ejemplo anterior hemos gestionado un evento click, por lo que el tipo de evento asociado es PointerEvent, y conlleva una serie de propiedades que no tienen porque estar presentes en otros tipos de eventos.

En nuestro ejemplo anterior, contendrían algo parecido a lo siguiente:

// Objeto PointerEvent
{
  type: "click",        // Nombre del evento
  pointerType: "mouse"  // Tipo de dispositivo
  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 click de un dispositivo que permite apuntar. Sin embargo, si utilizaramos otro evento, posiblemente obtendríamos un objeto con propiedades diferentes.

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);

Evitar la acción por defecto

Algunos elementos tienen un comportamiento por defecto. Por ejemplo, el elemento <details> muestra el texto del elemento <summary>, si se pulsa sobre el, se despliega el resto del contenido de <details>. Si se vuelve a pulsar, se oculta nuevamente. Ese es su comportamiento por defecto.

Sin embargo, pueden existir situaciones donde queremos que se anule este comportamiento y no se realice. Por ejemplo, para reimplementarlo nosotros, o cambiar su funcionalidad habitual. Para ello, tenemos a nuestra disposición una propiedad y un método que harán que sea muy sencillo:

Mediante el método .preventDefault() se establecerá el flag .defaultPrevented a true y podremos evitar el comportamiento base por defecto de dicho evento y añadirle otro diferente:

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

details.addEventListener("click", (event) => {
  event.preventDefault();
  alert("Has hecho click pero hemos eliminado el comportamiento por defecto.");
});

<details>
  <summary>More info</summary>
  <div>The cake is a lie The cake is a lie The cake is a lie The cake is a lie</div>
</details>

De esta forma, veremos que al pulsar sobre el elemento <details> ya no se expande ni se contrae, por lo que ahora podríamos crear nuestra propia lógica para reimplementar esta funcionalidad.