Eventos del navegador

Eventos de teclado, ratón, formularios, etc...

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

Tipo de evento Evento relacionado con...
Animaciones
AnimationEvent Información general de animaciones CSS.
AnimationPlaybackEvent Estado de reproducción de la animación CSS.
TransitionEvent Información de estado de la transición CSS.
Interfaz de usuario
KeyboardEvent Interacciones con teclas de teclado como keydown, keyup o keypress.
MouseEvent Interacciones con dispositivo apuntador (ratón) como click, dblclick, mousedown, mouseup.
PointerEvent Interacciones con dispositivo apuntador como pointerdown, pointerup... Acepta los de mouse.
TouchEvent Interacciones con dispositivos con superficie táctil como touchstart, touchend, etc...
WheelEvent Interacciones con la rueda de ratón o elemento similar como wheel.
Carga de página
BeforeUnloadEvent El instante justo antes de cerrar una pestaña o ventana del navegador como unload.
Portapapeles
ClipboardEvent Modificación del portapapeles con eventos como cut, copy o paste.
Eventos de giroscopio
DeviceMotionEvent Cambios en la posición o aceleración del giroscopio con devicemotion.
DeviceOrientationEvent Cambios en la orientación del dispositivo con deviceorientation.
Eventos de Drag and Drop
DragEvent Acciones Drag and Drop del usuario mediante drag, drop, dragstart, dragend...
Formularios
FocusEvent Interacciones con el foco de un elemento con focus, blur, focusin y focusout.
InputEvent Interacción al introducir texto en un elemento con input.
FormDataEvent Envío de datos de formulario mediante formdata.
SubmitEvent Envío de un formulario a través de un botón con submit.
Tipografías
FontFaceSetLoadEvent Carga de tipografías mediante loading, loadingdone o loadingerror.
Gamepad API
GamepadAxisEvent Interacción con la cruceta de un joystick o gamepad. Experimental.
GamepadButtonEvent Interacción con los botones de un gamepad. Experimental.
GamepadEvent Interacción al conectar un gamepad con gamepadconnected o gamepaddisconnected.
Eventos de URL
HashChangeEvent Modificación o cambio del anchor de una URL mediante hashchange.
NavigateEvent Interacción que interfiere con el historial de navegación mediante navigate.
PopStateEvent Interacción con una entrada del historial de navegación mediante popstate.
Eventos de Mensajería
MessageEvent Envío de mensaje a través de WebSocket, SSE, iframes, workers, WebRTC, etc...
CloseEvent Cierre de evento de WebSocket.
Pagos a través de navegador
PaymentMethodChangeEvent Cambio del método de pago a través de la API de pagos del navegador.
PaymentRequestUpdateEvent Se ha modificado algún detalle del diálogo de pago del navegador.
PictureInPicture
PictureInPictureEvent Sistema de Picture-in-picture como enterpictureinpicture o resize.
Eventos de voz
SpeechRecognitionEvent Interacción con el sistema de reconocimiento de voz mediante result o nomatch.
SpeechSynthesisErrorEvent Errores en la interacción creando un mensaje con el sintetizador de voz.
SpeechSynthesisEvent Interacción con el sintetizador de voz con pause, boundary, etc...
Eventos personalizados
CustomEvent Creación de eventos personalizados que explicamos detalladamente en Ver Custom Events

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

Tabla de contenidos