Para gestionar un evento, no basta con saber que es un clic o una pulsación, sino que se necesitan detalles. Por ejemplo, el valor actual del cuadro de texto, el elemento en el que se produjo el evento, los métodos incorporados y otros.

Cada evento es un objeto que contiene información sobre los detalles del evento y se pasa automáticamente como primer argumento al manejador de eventos. Todos los eventos ocurren sobre la clase base Event.

const handleClick = event => {
  console.log(event);
};

button.addEventListener("click", handleClick);

El parámetro event es el objeto de evento que se pasa automáticamente como primer argumento cuando se llama a una función callback. Podemos llamarlo como queramos, pero normalmente se declara como e, evt o event.

Algunas propiedades del objeto del evento:

• event.type - Tipo de evento.
• event.currentTarget - Es el elemento sobre el que se ejecuta el administrador de eventos.

Ejemplo:

HTML

<button type="button" class="btn">Click me</button>

Js

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

const handleClick = (event) => {
  console.log("event: ", event);
  console.log("event type: ", event.type);
  console.log("currentTarget: ", event.currentTarget);
};

button.addEventListener("click", handleClick);

Algunos eventos desencadenan una acción del navegador incorporada por defecto, por ejemplo al enviar un formulario se recarga la página, este comportamiento es indeseable y debe ser anulado.

Para anular la acción por defecto del navegador en un objeto de evento, existe un método estándar preventDefault().

Ejemplo

<form class="register-form" autocomplete="off">
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  <button type="submit">Register</button>
</form>

const form = document.querySelector(".register-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const {
    elements: { username, password }
  } = event.currentTarget;
  console.log(username.value, password.value);
});

Siguiente: eventos del teclado