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.
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.
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:
event.detail
event.x
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.
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):
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev