Eventos

Eventos en JavaScript

Los eventos son acciones que ocurren en el navegador - clics, teclas presionadas, movimientos del mouse, carga de pagina, etc. JavaScript puede "escuchar" y responder a estos eventos.

Agregando Event Listeners

const boton = document.querySelector("#mi-boton");

// Metodo preferido: addEventListener
boton.addEventListener("click", function(evento) {
  console.log("Boton clickeado!");
});

// Con funcion flecha
boton.addEventListener("click", (e) => {
  console.log("Click!", e.target);
});

// Funcion nombrada (permite remover despues)
function manejarClick(e) {
  console.log("Click!");
}
boton.addEventListener("click", manejarClick);
boton.removeEventListener("click", manejarClick);

Tipos de Eventos Comunes

// Eventos de mouse
elemento.addEventListener("click", fn);
elemento.addEventListener("dblclick", fn);
elemento.addEventListener("mouseenter", fn);
elemento.addEventListener("mouseleave", fn);
elemento.addEventListener("mousemove", fn);

// Eventos de teclado
document.addEventListener("keydown", fn);
document.addEventListener("keyup", fn);
document.addEventListener("keypress", fn); // Obsoleto

// Eventos de formulario
formulario.addEventListener("submit", fn);
input.addEventListener("input", fn);
input.addEventListener("change", fn);
input.addEventListener("focus", fn);
input.addEventListener("blur", fn);

// Eventos de ventana
window.addEventListener("load", fn);
window.addEventListener("resize", fn);
window.addEventListener("scroll", fn);
document.addEventListener("DOMContentLoaded", fn);

El Objeto Evento

boton.addEventListener("click", function(evento) {
  // Propiedades comunes
  console.log(evento.type);    // "click"
  console.log(evento.target);  // Elemento clickeado
  console.log(evento.currentTarget); // Elemento con el listener

  // Posicion del mouse
  console.log(evento.clientX, evento.clientY); // Relativo a ventana
  console.log(evento.pageX, evento.pageY);     // Relativo a documento

  // Teclas modificadoras
  console.log(evento.shiftKey); // true si Shift presionado
  console.log(evento.ctrlKey);  // true si Ctrl presionado
  console.log(evento.altKey);   // true si Alt presionado
});

// Para eventos de teclado
document.addEventListener("keydown", (e) => {
  console.log(e.key);     // "Enter", "a", "ArrowUp", etc.
  console.log(e.code);    // "Enter", "KeyA", "ArrowUp", etc.
  console.log(e.keyCode); // Obsoleto, evitar
});

Previniendo Comportamiento por Defecto

// Prevenir envio de formulario
formulario.addEventListener("submit", (e) => {
  e.preventDefault();
  // Manejar envio con JavaScript
});

// Prevenir navegacion de enlace
enlace.addEventListener("click", (e) => {
  e.preventDefault();
  // Hacer algo mas
});

// Detener propagacion (bubbling)
elemento.addEventListener("click", (e) => {
  e.stopPropagation();
  // El evento no llegara a elementos padre
});

Delegacion de Eventos

// En vez de agregar listener a cada item...
// Agrega uno al contenedor padre

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

lista.addEventListener("click", (e) => {
  // Verificar si el click fue en un item
  if (e.target.matches(".item")) {
    console.log("Item clickeado:", e.target.textContent);
  }

  // O usando closest para elementos anidados
  const item = e.target.closest(".item");
  if (item) {
    console.log("Item:", item);
  }
});

// Ventajas:
// - Un solo listener en vez de muchos
// - Funciona con elementos agregados dinamicamente
// - Mejor rendimiento