En JavaScript, el navegador y el DOM proporcionan una gran cantidad de eventos disponibles.
Por ejemplo, esto nos permite reaccionar a sucesos como la finalización de la carga de un documento, o la acción de un usuario con el ratón o el teclado.
Vamos a ver algunos de las categorías de eventos, con sus eventos más comunes 👇.
Eventos de ventana
Estos eventos están relacionados con el objeto window y su estado:
| Evento | Se activa cuando |
|---|---|
| load | El contenido de la ventana y todos sus recursos han terminado de cargar. |
| resize | El tamaño de la ventana cambia. |
| scroll | Se desplaza el contenido de la ventana. |
| unload | La ventana se cierra o se navega a una nueva página. |
window.addEventListener('resize', function(event) {
console.log('Tamaño de ventana cambiado');
});Eventos de carga y descarga
Estos eventos están relacionados con la carga y descarga de recursos:
| Evento | Se activa cuando |
|---|---|
| DOMContentLoaded | El contenido del DOM se ha cargado y analizado, pero antes de que se carguen las hojas de estilo, imágenes y subframes. |
| beforeunload | Antes de que la página sea descargada, permitiendo mostrar un mensaje de confirmación. |
Ejemplo:
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM completamente cargado y parseado');
});Eventos de mouse
Estos eventos están relacionados con las acciones realizadas con el ratón. Algunos de los eventos de ratón más comunes son:
| Evento | Se activa cuando |
|---|---|
| click | El usuario hace clic en un elemento. |
| dblclick | El usuario hace doble clic en un elemento. |
| mousedown | El usuario presiona un botón del ratón sobre un elemento. |
| mouseup | El usuario suelta un botón del ratón sobre un elemento. |
| mousemove | El usuario mueve el ratón sobre un elemento. |
| mouseenter | El ratón entra en el área de un elemento. |
| mouseleave | El ratón sale del área de un elemento. |
document.getElementById('miBoton').addEventListener('click', function(event) {
alert('Botón clickeado');
});Eventos de Drag and Drop
Estos eventos están relacionados con las acciones de arrastrar y soltar elementos en una página web.
Se utilizan comúnmente para implementar interfaces interactivas que permiten mover elementos de un lugar a otro.
| Evento | Se activa cuando |
|---|---|
| dragstart | El usuario comienza a arrastrar un elemento. |
| drag | El usuario arrastra un elemento (se activa continuamente mientras el elemento se arrastra). |
| dragend | El usuario suelta el elemento que estaba arrastrando. |
| dragenter | Un elemento arrastrado entra en el área de un destino válido de drop. |
| dragover | Un elemento arrastrado se mueve dentro del área de un destino válido. |
| dragleave | Un elemento arrastrado sale del área de un destino válido de drop. |
| drop | Un elemento arrastrado se suelta en un destino válido de drop. |
const elementoArrastrable = document.getElementById('arrastrable');
const contenedor = document.getElementById('contenedor');
// Configurar el elemento arrastrable
elementoArrastrable.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', event.target.id);
console.log('Drag iniciado');
});
// Configurar el contenedor como destino válido
contenedor.addEventListener('dragover', function(event) {
event.preventDefault(); // Necesario para permitir el drop
console.log('Elemento arrastrado sobre el contenedor');
});
contenedor.addEventListener('drop', function(event) {
event.preventDefault();
const id = event.dataTransfer.getData('text');
const elemento = document.getElementById(id);
contenedor.appendChild(elemento);
console.log('Elemento soltado en el contenedor');
});Eventos de teclado
Estos eventos están relacionados con las acciones realizadas con el teclado:
| Evento | Se activa cuando |
|---|---|
| keydown | El usuario presiona una tecla. |
| keyup | El usuario suelta una tecla. |
| keypress | El usuario presiona una tecla que produce un carácter. |
document.addEventListener('keydown', function(event) {
console.log(`Tecla presionada: ${event.key}`);
});Eventos de formulario
Estos eventos están relacionados con la interacción con formularios HTML:
| Evento | Se activa cuando |
|---|---|
| submit | Un formulario se envía. |
| change | El valor de un campo de formulario cambia. |
| input | El usuario ingresa o modifica el valor de un campo. |
| focus | Un campo de formulario recibe el enfoque. |
| blur | Un campo de formulario pierde el enfoque. |
document.getElementById('miFormulario').addEventListener('submit', function(event) {
event.preventDefault(); // Evita que el formulario se envíe
console.log('Formulario enviado');
});Eventos de media
Estos eventos están relacionados con la reproducción de medios (audio y video):
| Evento | Se activa cuando |
|---|---|
| play | Se inicia la reproducción de un medio. |
| pause | Se pausa la reproducción de un medio. |
| ended | La reproducción de un medio termina. |
| volumechange | El volumen del medio cambia. |
const videoElement = document.getElementById('miVideo');
videoElement.addEventListener('play', function(event) {
console.log('El video está reproduciéndose');
});