Ir al contenido principal

Tipos de eventos

Introducción

Los eventos son una parte fundamental de JavaScript y constituyen la base de la interactividad en las aplicaciones web. Un evento representa una acción o suceso que ocurre en el navegador, generalmente iniciado por el usuario (como un clic) o por el propio navegador (como la carga completa de la página). El sistema de eventos nos permite ejecutar código en respuesta a estas acciones, creando así experiencias web dinámicas e interactivas.

En este artículo exploraremos los distintos tipos de eventos disponibles en JavaScript, sus características específicas y cómo podemos utilizarlos para crear interfaces de usuario reactivas. Comprender estos eventos es esencial para dominar la interacción entre el usuario y nuestras aplicaciones web.

Concepto de eventos en JavaScript

Los eventos en JavaScript funcionan siguiendo un modelo de programación orientado a eventos. En este modelo:

  1. El navegador "escucha" determinadas acciones
  2. Cuando ocurre una acción, genera un evento
  3. Si hay código JavaScript configurado para reaccionar a ese evento (un "escuchador" o "listener"), dicho código se ejecuta

Cada evento lleva asociada información sobre lo que ha ocurrido, como la posición del cursor en un evento de ratón o la tecla pulsada en un evento de teclado.

// Estructura básica para manejar eventos
elemento.addEventListener('tipoDeEvento', function(evento) {
  // El parámetro 'evento' contiene información sobre lo ocurrido
  console.log('¡Evento detectado!', evento);
});

Eventos del ratón

Los eventos del ratón se producen cuando el usuario interactúa con la página utilizando este dispositivo. Son probablemente los eventos más comunes en el desarrollo web.

Eventos principales del ratón

  • click: Se dispara cuando se hace clic en un elemento (presionar y soltar en la misma posición).
  • dblclick: Se dispara cuando se hace doble clic en un elemento.
  • mousedown: Se dispara cuando se presiona el botón del ratón sobre un elemento.
  • mouseup: Se dispara cuando se suelta el botón del ratón sobre un elemento.
  • mousemove: Se dispara cuando se mueve el ratón sobre un elemento.
  • mouseover: Se dispara cuando el puntero del ratón entra en un elemento.
  • mouseout: Se dispara cuando el puntero del ratón sale de un elemento.
  • mouseenter: Similar a mouseover, pero no se propaga a elementos hijos.
  • mouseleave: Similar a mouseout, pero no se propaga desde elementos hijos.

Ejemplo práctico de eventos del ratón

const boton = document.getElementById('miBoton');

// Evento click
boton.addEventListener('click', function(e) {
  console.log('Has hecho clic en el botón');
});

// Eventos de entrada y salida del ratón
boton.addEventListener('mouseenter', function() {
  boton.style.backgroundColor = 'lightblue';
  console.log('Ratón sobre el botón');
});

boton.addEventListener('mouseleave', function() {
  boton.style.backgroundColor = '';
  console.log('Ratón fuera del botón');
});

// Seguimiento del movimiento del ratón
document.addEventListener('mousemove', function(e) {
  // e.clientX y e.clientY contienen las coordenadas del puntero
  document.getElementById('coordenadas').textContent = 
    `Posición: X=${e.clientX}, Y=${e.clientY}`;
});

Eventos del teclado

Los eventos del teclado se disparan cuando el usuario interactúa con las teclas. Son especialmente útiles para formularios, juegos o atajos de teclado.

Eventos principales del teclado

  • keydown: Se dispara cuando se presiona una tecla.
  • keyup: Se dispara cuando se suelta una tecla.
  • keypress: Se dispara cuando se mantiene presionada una tecla que produce un carácter (obsoleto en favor de keydown).

Propiedades importantes del evento de teclado

  • key: Devuelve el valor de la tecla presionada ("a", "Enter", "ArrowLeft", etc.).
  • code: Devuelve el código físico de la tecla ("KeyA", "Enter", "ArrowLeft", etc.).
  • altKey, ctrlKey, shiftKey, metaKey: Indican si las teclas modificadoras estaban presionadas durante el evento.

Ejemplo de eventos del teclado

const campoTexto = document.getElementById('miInput');

// Detectar teclas presionadas
campoTexto.addEventListener('keydown', function(e) {
  console.log(`Tecla presionada: ${e.key} (código: ${e.code})`);
  
  // Detectar combinaciones de teclas (Ctrl+Enter)
  if (e.key === 'Enter' && e.ctrlKey) {
    console.log('¡Combinación Ctrl+Enter detectada!');
    document.getElementById('formulario').submit();
  }
});

// Reaccionar cuando se sueltan las teclas
campoTexto.addEventListener('keyup', function(e) {
  console.log(`Tecla soltada: ${e.key}`);
  
  // Contar caracteres introducidos
  const longitud = this.value.length;
  document.getElementById('contador').textContent = 
    `Caracteres: ${longitud}/100`;
});

Eventos de formulario

Los eventos de formulario están relacionados con la interacción del usuario con elementos de formulario HTML.

Eventos principales de formulario

  • submit: Se dispara cuando se envía un formulario.
  • reset: Se dispara cuando se resetea un formulario.
  • change: Se dispara cuando cambia el valor de un elemento de formulario y pierde el foco.
  • input: Se dispara cada vez que cambia el valor de un elemento de formulario (más inmediato que change).
  • focus: Se dispara cuando un elemento recibe el foco.
  • blur: Se dispara cuando un elemento pierde el foco.

Ejemplo de eventos de formulario

const formulario = document.getElementById('miFormulario');
const campoNombre = document.getElementById('nombre');
const campoEmail = document.getElementById('email');

// Evento de envío de formulario
formulario.addEventListener('submit', function(e) {
  // Prevenir el comportamiento predeterminado
  e.preventDefault();
  
  // Validar el formulario antes de enviarlo
  if (validarFormulario()) {
    console.log('Formulario válido, enviando datos...');
    // Aquí iría el código para enviar los datos
    this.submit();
  }
});

// Eventos de cambio en campos
campoEmail.addEventListener('change', function() {
  // Se ejecuta cuando el campo pierde el foco después de un cambio
  console.log('Email actualizado:', this.value);
  validarEmail(this.value);
});

campoNombre.addEventListener('input', function() {
  // Se ejecuta con cada cambio, incluso mientras se escribe
  console.log('Escribiendo nombre:', this.value);
  // Actualizar un contador de caracteres en tiempo real
  document.getElementById('nombreContador').textContent = 
    `${this.value.length}/50`;
});

// Eventos de foco
campoNombre.addEventListener('focus', function() {
  // Destacar el campo activo
  this.style.borderColor = '#0066ff';
});

campoNombre.addEventListener('blur', function() {
  // Restaurar estilo normal al perder el foco
  this.style.borderColor = '';
  // Validar al salir del campo
  if (this.value.trim() === '') {
    this.style.borderColor = 'red';
    document.getElementById('nombreError').textContent = 
      'El nombre es obligatorio';
  }
});

Eventos del documento y ventana

Estos eventos están relacionados con el documento HTML o la ventana del navegador.

Eventos principales del documento y ventana

  • load: Se dispara cuando la página y todos sus recursos han terminado de cargar.
  • DOMContentLoaded: Se dispara cuando el documento HTML ha sido completamente cargado y analizado, sin esperar a CSS o imágenes.
  • resize: Se dispara cuando se cambia el tamaño de la ventana del navegador.
  • scroll: Se dispara cuando se hace scroll en el documento o en un elemento con overflow.
  • beforeunload: Se dispara justo antes de que el usuario abandone la página.
  • unload: Se dispara cuando el usuario abandona la página.
  • online/offline: Se disparan cuando el navegador detecta cambios en la conectividad.

Ejemplo de eventos del documento y ventana

// Esperar a que la página esté completamente cargada
window.addEventListener('load', function() {
  console.log('La página y todos sus recursos han cargado');
  document.getElementById('loadingOverlay').style.display = 'none';
});

// Alternativa más rápida: no espera a que se carguen imágenes y CSS
document.addEventListener('DOMContentLoaded', function() {
  console.log('El documento HTML ha sido cargado y analizado');
  // Inicializar la interfaz básica
  inicializarUI();
});

// Detectar cambios de tamaño de ventana (útil para diseños responsivos)
window.addEventListener('resize', function() {
  const ancho = window.innerWidth;
  const alto = window.innerHeight;
  console.log(`Nuevo tamaño de ventana: ${ancho}x${alto}`);
  
  // Actualizar elementos que dependan del tamaño de pantalla
  ajustarDisenio(ancho);
});

// Detectar scroll
window.addEventListener('scroll', function() {
  const posicionY = window.scrollY;
  
  // Ejemplo: mostrar/ocultar botón "volver arriba"
  if (posicionY > 300) {
    document.getElementById('volverArriba').style.display = 'block';
  } else {
    document.getElementById('volverArriba').style.display = 'none';
  }
});

// Confirmar antes de salir de la página
window.addEventListener('beforeunload', function(e) {
  // Si hay cambios sin guardar
  if (hayDatosSinGuardar()) {
    // Mostrar confirmación al usuario
    e.preventDefault();
    e.returnValue = ''; // Necesario para algunos navegadores
    return ''; // El mensaje exacto lo determina el navegador
  }
});

// Detectar estado de la conexión
window.addEventListener('online', function() {
  console.log('Conexión restablecida');
  sincronizarDatos();
});

window.addEventListener('offline', function() {
  console.log('Se ha perdido la conexión');
  mostrarNotificacion('Sin conexión, trabajando en modo offline');
});

Eventos táctiles (para dispositivos móviles)

Los eventos táctiles son específicos para dispositivos con pantalla táctil, como smartphones y tablets.

Eventos principales táctiles

  • touchstart: Se dispara cuando el usuario toca la pantalla.
  • touchmove: Se dispara cuando el usuario mueve el dedo por la pantalla.
  • touchend: Se dispara cuando el usuario levanta el dedo de la pantalla.
  • touchcancel: Se dispara cuando el toque se interrumpe.

Propiedades importantes del evento táctil

  • touches: Lista de todos los puntos de contacto actuales.
  • targetTouches: Lista de puntos de contacto en el elemento actual.
  • changedTouches: Lista de puntos de contacto que cambiaron en este evento.

Ejemplo de eventos táctiles

const areaTouch = document.getElementById('areaTactil');

areaTouch.addEventListener('touchstart', function(e) {
  // Prevenir el comportamiento predeterminado (como zoom)
  e.preventDefault();
  console.log('Inicio de toque detectado');
  
  // Obtener información del primer toque
  const primerToque = e.touches[0];
  const x = primerToque.clientX;
  const y = primerToque.clientY;
  
  console.log(`Posición: X=${x}, Y=${y}`);
});

areaTouch.addEventListener('touchmove', function(e) {
  e.preventDefault();
  
  // Seguir el movimiento del dedo
  const toque = e.touches[0];
  const elemento = document.getElementById('elementoArrastrable');
  
  // Actualizar posición del elemento
  elemento.style.left = (toque.clientX - 50) + 'px';
  elemento.style.top = (toque.clientY - 50) + 'px';
});

areaTouch.addEventListener('touchend', function(e) {
  console.log('Fin de toque detectado');
  // Realizar acción cuando se levanta el dedo
  finalizarInteraccion();
});

Eventos personalizados

Además de los eventos nativos, JavaScript permite crear y disparar eventos personalizados para gestionar interacciones específicas de nuestra aplicación.

Creación y disparo de eventos personalizados

// Crear un evento personalizado
const eventoProductoAnadido = new CustomEvent('productoAnadido', {
  detail: {
    id: 'prod123',
    nombre: 'Zapatillas deportivas',
    precio: 79.99
  },
  bubbles: true, // Permite que el evento se propague hacia arriba
  cancelable: true // Permite que el evento pueda ser cancelado
});

// Disparar el evento personalizado
document.getElementById('carrito').dispatchEvent(eventoProductoAnadido);

// Escuchar el evento personalizado
document.getElementById('carrito').addEventListener('productoAnadido', function(e) {
  console.log('Producto añadido al carrito:', e.detail);
  actualizarTotalCarrito(e.detail.precio);
  mostrarNotificacion(`${e.detail.nombre} añadido al carrito`);
});

Propiedades del objeto evento

Cuando se dispara un evento, JavaScript crea un objeto evento que contiene información sobre lo ocurrido. Este objeto se pasa automáticamente a la función manejadora del evento.

Propiedades comunes a todos los objetos evento

  • type: El tipo de evento (por ejemplo, "click", "keydown").
  • target: El elemento que desencadenó el evento originalmente.
  • currentTarget: El elemento al que está asociado el manejador de eventos actual.
  • bubbles: Indica si el evento se propaga hacia arriba en el DOM.
  • cancelable: Indica si se puede cancelar el comportamiento predeterminado del evento.
  • timeStamp: El momento en que se creó el evento (en milisegundos).
  • isTrusted: Indica si el evento fue generado por una acción del usuario (true) o por script (false).

Métodos del objeto evento

  • preventDefault(): Evita el comportamiento predeterminado asociado al evento.
  • stopPropagation(): Detiene la propagación del evento en las fases de captura y burbujeo.
  • stopImmediatePropagation(): Detiene la propagación y evita que se ejecuten otros manejadores del mismo evento.

Ejemplo de uso de propiedades del evento

document.getElementById('miEnlace').addEventListener('click', function(e) {
  // Prevenir navegación predeterminada
  e.preventDefault();
  
  console.log('Tipo de evento:', e.type);
  console.log('Elemento objetivo:', e.target);
  console.log('Elemento con el listener:', e.currentTarget);
  console.log('Evento originado por usuario:', e.isTrusted);
  console.log('Tiempo de creación del evento:', e.timeStamp);
  
  // Determinar qué botón del ratón se presionó
  if (e.type === 'click' || e.type === 'mousedown') {
    switch(e.button) {
      case 0:
        console.log('Botón izquierdo');
        break;
      case 1:
        console.log('Botón central/rueda');
        break;
      case 2:
        console.log('Botón derecho');
        break;
    }
  }
  
  // Detener la propagación del evento
  e.stopPropagation();
});

Resumen

Los eventos son el pilar de la interactividad en las aplicaciones web modernas. Hemos explorado los principales tipos de eventos disponibles en JavaScript:

  • Eventos del ratón: para detectar clics, movimientos y otras interacciones con el puntero.
  • Eventos del teclado: para capturar pulsaciones de teclas y combinaciones.
  • Eventos de formulario: para gestionar la interacción con elementos de entrada de datos.
  • Eventos del documento y ventana: para controlar el ciclo de vida de la página y cambios en el estado del navegador.
  • Eventos táctiles: para crear interfaces adaptadas a dispositivos móviles.
  • Eventos personalizados: para implementar nuestros propios sistemas de eventos según las necesidades específicas de la aplicación.

Dominar estos eventos y sus propiedades nos permite crear interfaces de usuario ricas y dinámicas que responden a las acciones del usuario de manera efectiva. En el siguiente artículo, profundizaremos en cómo añadir y quitar listeners de eventos para gestionar estas interacciones de manera eficiente.

Volver arriba