Eventos del navegador

Generalmente, cuando ocurre un evento debido a una acción del usuario, se dispara un evento de navegador. Son eventos nativos específicos que realizan una cierta tarea y donde su objeto de evento tiene propiedades o métodos especiales para dicha tarea.

Tipos de eventos

Normalmente, el evento que se dispara es de tipo Event, sin embargo, existe una amplia lista de eventos más específicos. Existen muchos y muy variados. Veamos una lista de algunos de los eventos de navegador disponibles (no están todos):

Recuerda que esto es sólo una pequeña lista de todos los eventos de navegador que existen.

Ejemplo de eventos

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>

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

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

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