Eventos

Responde a acciones del usuario con addEventListener: clicks, inputs, teclado y formularios.

📖

Teoría

Los eventos son acciones que ocurren en la página (clic, tecla, scroll, etc.). Con addEventListener puedes responder a ellos.

Eventos comunes:

click → clic en un elemento

input → cambio en un campo de texto

submit → envío de formulario

keydown / keyup → tecla presionada/liberada

mouseover / mouseout → hover

DOMContentLoaded → página cargada

javascript

// addEventListener(evento, función_manejadora)
const btn = document.querySelector("#mi-btn");

btn.addEventListener("click", function(event) {
  console.log("¡Clic!");
  console.log(event.target); // el elemento clicado
});

// Arrow function
btn.addEventListener("click", (e) => {
  e.preventDefault(); // previene comportamiento default
  console.log("Clic con arrow function");
});

// Formulario
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // SIEMPRE para formularios (evita recargar)
  const datos = new FormData(form);
  console.log(datos.get("email"));
});

// Teclado
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("ESC presionado");
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("Ctrl+S");
  }
});

⚡

Ejercicio práctico

🎯 Tu misión

Crea un formulario de registro con validación JavaScript: valida que el email tenga @ y el punto, que la contraseña tenga mínimo 8 caracteres, y muestra mensajes de error en tiempo real. Usa submit para mostrar los datos.

Console

Los mensajes de console.log aparecerán aquí

Vista previa

←Capítulo anterior

Siguiente capítulo→