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: 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
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})`;
});body {
margin: 0;
width: 100vw;
height: 100vh;
background: lightgrey;
user-select: none;
font-size: 2rem;
}<span>Haz click en una parte de la página</span>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.
