Eventos

Eventos Fundamental

Tip

Los eventos son acciones o sucesos que ocurren en un documento web y pueden ser detectados por JavaScript.

Eventos básicos Básico

Eventos del mouse

const boton = document.querySelector('#miBoton');

// Click
boton.addEventListener('click', () => {
  console.log('Botón clickeado');
});

// Doble click
boton.addEventListener('dblclick', () => {
  console.log('Doble click');
});

// Hover
boton.addEventListener('mouseenter', () => {
  console.log('Mouse entró');
});

boton.addEventListener('mouseleave', () => {
  console.log('Mouse salió');
});

Eventos del teclado

const input = document.querySelector('#miInput');

// Tecla presionada
input.addEventListener('keydown', (evento) => {
  console.log(`Tecla presionada: ${evento.key}`);
});

// Tecla liberada
input.addEventListener('keyup', (evento) => {
  console.log(`Tecla liberada: ${evento.key}`);
});

// Entrada de texto
input.addEventListener('input', (evento) => {
  console.log(`Valor actual: ${evento.target.value}`);
});

El objeto Event Importante

Propiedades principales

document.addEventListener('click', (evento) => {
  // Tipo de evento
  console.log(evento.type);  // 'click'

  // Elemento que disparó el evento
  console.log(evento.target);

  // Coordenadas del mouse
  console.log(evento.clientX, evento.clientY);

  // Teclas presionadas
  console.log(evento.ctrlKey, evento.shiftKey);
});

Prevenir comportamiento por defecto

const form = document.querySelector('form');

form.addEventListener('submit', (evento) => {
  // Prevenir envío del formulario
  evento.preventDefault();

  // Código de validación aquí
});

const enlace = document.querySelector('a');
enlace.addEventListener('click', (evento) => {
  // Prevenir navegación
  evento.preventDefault();
});

Propagación de eventos Avanzado

Burbujeo y captura

// Burbujeo (por defecto)
elemento.addEventListener('click', (evento) => {
  console.log('Fase de burbujeo');
});

// Captura
elemento.addEventListener('click', (evento) => {
  console.log('Fase de captura');
}, true);

// Detener propagación
elemento.addEventListener('click', (evento) => {
  evento.stopPropagation();
  console.log('Este evento no se propagará');
});

Delegación de eventos

const lista = document.querySelector('#lista');

lista.addEventListener('click', (evento) => {
  if (evento.target.matches('li')) {
      console.log('Click en elemento li:', evento.target.textContent);
  }
});

Eventos personalizados Avanzado

Crear y disparar eventos

// Crear evento personalizado
const eventoPersonalizado = new CustomEvent('miEvento', {
  detail: {
      mensaje: 'Hola desde evento personalizado'
  }
});

// Escuchar evento personalizado
elemento.addEventListener('miEvento', (evento) => {
  console.log(evento.detail.mensaje);
});

// Disparar evento
elemento.dispatchEvent(eventoPersonalizado);

Eventos comunes Referencia

Eventos del documento

// DOM cargado
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM está listo');
});

// Página completamente cargada
window.addEventListener('load', () => {
  console.log('Página completamente cargada');
});

// Antes de cerrar la página
window.addEventListener('beforeunload', (evento) => {
  evento.preventDefault();
  evento.returnValue = '';
});

Eventos de formulario

const form = document.querySelector('form');
const input = document.querySelector('input');

// Envío de formulario
form.addEventListener('submit', (evento) => {
  evento.preventDefault();
  console.log('Formulario enviado');
});

// Cambio en input
input.addEventListener('change', () => {
  console.log('Valor cambiado');
});

// Durante la escritura
input.addEventListener('input', () => {
  console.log('Escribiendo...');
});

Mejores prácticas Recomendado

Usar delegación de eventos

// ❌ Malo
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', handleClick);
});

// ✅ Bueno
document.addEventListener('click', (evento) => {
  if (evento.target.matches('button')) {
      handleClick(evento);
  }
});

Remover event listeners cuando no se necesiten

const handleClick = () => console.log('Click');

// Agregar evento
elemento.addEventListener('click', handleClick);

// Remover cuando ya no se necesite
elemento.removeEventListener('click', handleClick);

Usar opciones de addEventListener

elemento.addEventListener('click', handleClick, {
  once: true,      // Se ejecuta solo una vez
  passive: true,   // Mejora el rendimiento del scroll
  capture: false   // Fase de burbujeo (default)
});