Eventos y formularios

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Reaccionar a clics, teclas y formularios con addEventListener.
Leer los campos de un formulario y validarlos con mensajes accesibles.
Usar preventDefault y entender el burbujeo.
Aplicar la delegación de eventos en listas dinámicas.

1.Qué es un evento

Un evento es algo que ocurre en la página: un clic, una tecla pulsada, un formulario enviado, la ventana que cambia de tamaño, una imagen que termina de cargar. JavaScript te permite escuchar esos eventos y ejecutar una función cuando suceden. Así la página deja de ser un documento estático y se vuelve interactiva.

La fórmula básica

elemento.addEventListener("tipo-de-evento", funcion);
//            ① qué escuchar    ② qué hacer

▶ Tu primer evento

Código (edítalo y pulsa Ejecutar)

<button id="boton">Púlsame</button>
<p id="resultado">Aún no has pulsado nada.</p>

<script>
  const boton = document.getElementById("boton");
  const resultado = document.getElementById("resultado");
  let veces = 0;

  boton.addEventListener("click", () => {
    veces++;
    resultado.textContent = `Has pulsado ${veces} ${veces === 1 ? "vez" : "veces"}`;
    console.log("Clic número", veces);
  });
</script>

Página (resultado)

Consola

La función que pasas se llama manejador (*handler*) o callback. No se ejecuta al escribirla: el navegador la guarda y la llama cada vez que ocurre el evento.

⚠️ Importante · No pongas paréntesis

boton.addEventListener("click", saludar) pasa la función para que el navegador la llame cuando toque. boton.addEventListener("click", saludar()) la ejecuta ya y pasa su resultado. Es el error más común con eventos.

2.Los eventos más usados

Evento	Cuándo ocurre	Típico en
`click`	Se pulsa (con ratón, dedo o teclado en un botón)	Botones, enlaces, tarjetas
`dblclick`	Doble clic
`input`	Cada vez que cambia lo escrito	Buscadores en vivo, contadores de caracteres
`change`	Cuando el valor cambia y se confirma (al salir del campo)	`select`, `checkbox`, `radio`
`submit`	Se envía un `<form>`	Formularios
`keydown` / `keyup`	Se pulsa / suelta una tecla	Atajos, juegos
`mouseover` / `mouseout`	El cursor entra / sale	Efectos
`focus` / `blur`	El elemento recibe / pierde el foco	Validar al salir del campo
`scroll`, `resize`	Se desplaza / cambia el tamaño	Barras, cabeceras
`DOMContentLoaded`	El HTML ya se leyó	Iniciar el programa
`load`	Todo cargó (imágenes incluidas)

3.El objeto del evento

El navegador llama a tu función pasándole un objeto con información sobre lo ocurrido. Por convención se llama evento o e:

▶ Qué sabe el evento

Código (edítalo y pulsa Ejecutar)

<button id="b" class="rojo">Pulsa aquí</button>
<input id="campo" placeholder="Escribe y pulsa teclas">
<script>
  document.getElementById("b").addEventListener("click", (e) => {
    console.log("tipo:", e.type);
    console.log("elemento:", e.target.id, "| clase:", e.target.className);
    console.log("posición:", e.clientX, e.clientY);
  });

  document.getElementById("campo").addEventListener("keydown", (e) => {
    console.log("tecla:", e.key, "| ctrl:", e.ctrlKey);
  });
</script>

Página (resultado)

Consola

Propiedad	Qué da
`e.target`	El elemento donde ocurrió el evento
`e.currentTarget`	El elemento al que está pegado el manejador
`e.type`	El nombre del evento (`"click"`)
`e.key`	La tecla pulsada (`"Enter"`, `"a"`, `"Escape"`)
`e.clientX`, `e.clientY`	Posición del cursor
`e.preventDefault()`	Cancela la acción por defecto
`e.stopPropagation()`	Detiene que el evento «suba» a los padres

4.Formularios: submit y preventDefault

Un formulario HTML, al enviarse, recarga la página y manda los datos al servidor. Con JavaScript casi siempre queremos evitarlo y procesar los datos nosotros. Para eso, e.preventDefault():

▶ Un formulario con JavaScript

Código (edítalo y pulsa Ejecutar)

<form id="saludo">
  <label for="nombre">Tu nombre</label>
  <input id="nombre" required>
  <button type="submit">Saludar</button>
</form>
<p id="respuesta" role="status"></p>

<script>
  const form = document.getElementById("saludo");
  const campo = document.getElementById("nombre");
  const respuesta = document.getElementById("respuesta");

  form.addEventListener("submit", (e) => {
    e.preventDefault();                       // ¡sin esto, se recargaría la página!
    const nombre = campo.value.trim();
    respuesta.textContent = `¡Hola, ${nombre}!`;
    form.reset();                             // vaciar el formulario
    campo.focus();                            // devolver el foco al campo
  });
</script>

Página (resultado)

Consola

💡 Consejo · Escucha submit, no click

Escucha submit en el <form>, no click en el botón. Así también funciona al pulsar Enter dentro de un campo, y respetas la validación del navegador (required, type="email"…).

Leer los valores de los campos

Campo	Propiedad	Tipo de dato
`input type="text"`, `textarea`, `select`	`.value`	Siempre texto (convierte con `Number()`)
`input type="number"`	`.value` / `.valueAsNumber`	Texto / número
`input type="checkbox"`	`.checked`	`true` / `false`
`input type="radio"` (grupo)	`querySelector("input[name=x]:checked")?.value`	Texto o `undefined`
Todo el formulario	`Object.fromEntries(new FormData(form))`	Un objeto con todos los campos

▶ FormData

Código (edítalo y pulsa Ejecutar)

<form id="registro">
  <input name="usuario" value="ana">
  <input name="edad" type="number" value="28">
  <label><input name="acepto" type="checkbox" checked> Acepto</label>
  <select name="pais"><option>México</option><option selected>Perú</option></select>
  <button>Enviar</button>
</form>
<script>
  document.getElementById("registro").addEventListener("submit", (e) => {
    e.preventDefault();
    const datos = Object.fromEntries(new FormData(e.target));
    console.log(datos);
    console.log("edad + 1 =", Number(datos.edad) + 1);
  });
</script>

Página (resultado)

Consola

5.Validar y mostrar mensajes

HTML ya valida mucho (required, minlength, type="email", pattern). JavaScript te permite reglas propias y mensajes claros dentro de la página, en lugar de ventanas emergentes:

▶ Validación propia

Código (edítalo y pulsa Ejecutar)

<form id="f" novalidate>
  <label for="c">Contraseña (mínimo 8 caracteres)</label>
  <input id="c" type="password" aria-describedby="err">
  <button>Crear cuenta</button>
  <p id="err" role="alert" style="color:#b00020"></p>
</form>
<script>
  const f = document.getElementById("f");
  const c = document.getElementById("c");
  const err = document.getElementById("err");

  f.addEventListener("submit", (e) => {
    e.preventDefault();
    if (c.value.length < 8) {
      err.textContent = "La contraseña necesita al menos 8 caracteres.";
      c.setAttribute("aria-invalid", "true");
      c.focus();
      return;
    }
    err.textContent = "";
    c.removeAttribute("aria-invalid");
    console.log("¡Cuenta creada!");
  });
</script>

Página (resultado)

Consola

Pon el mensaje junto al campo y enlázalo con aria-describedby; usa role="alert" para que se anuncie.
Marca el campo con aria-invalid="true" y devuelve el foco al primer campo con error.
El mensaje debe decir qué pasó y cómo arreglarlo.
form.checkValidity() y campo.validity consultan la validación nativa.

6.Propagación y delegación de eventos

Cuando ocurre un evento en un elemento, «sube» por sus ancestros: primero se avisa al elemento, luego a su padre, a su abuelo… hasta document. A esto se le llama burbujeo (*bubbling*).

Y de ahí sale una técnica muy potente, la delegación de eventos: en lugar de poner un manejador a cada elemento de una lista, pones uno solo en el contenedor y miras e.target para saber cuál se pulsó. Funciona también con los elementos que añadas después.

▶ Delegación

Código (edítalo y pulsa Ejecutar)

<ul id="lista">
  <li>Aprender eventos</li>
  <li>Practicar</li>
</ul>
<button id="nuevo">Añadir una tarea</button>

<script>
  const lista = document.getElementById("lista");

  // UN solo manejador para todos los <li>, presentes y futuros
  lista.addEventListener("click", (e) => {
    const li = e.target.closest("li");
    if (!li) return;                       // el clic no fue en un <li>
    li.classList.toggle("hecha");
    li.style.textDecoration = li.classList.contains("hecha") ? "line-through" : "none";
  });

  document.getElementById("nuevo").addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = "Tarea nueva " + (lista.children.length + 1);
    lista.append(li);                      // ya responde al clic sin añadirle nada
  });
</script>

Página (resultado)

Consola

📌 Nota · closest()

e.target.closest("li") sube desde el elemento pulsado hasta encontrar el li más cercano. Es más robusto que e.target a secas, porque el clic puede caer en un <strong> dentro del <li>.

7.Teclado y accesibilidad

Usa <button> para las acciones: funciona con ratón, teclado (Enter, Espacio) y lector de pantalla, sin hacer nada.
No pongas click en un <div> o <span>: nadie podrá usarlo con teclado.
Para atajos, escucha keydown y comprueba e.key (por ejemplo "Escape" para cerrar).
Nunca dependas solo del ratón (mouseover): ofrece también focus.
Si cambias algo en la página, avísalo con una región aria-live o role="status".

▶ Atajos de teclado

Código (edítalo y pulsa Ejecutar)

<input id="campo" placeholder="Escribe algo y pulsa Escape para borrar">
<p id="info" role="status"></p>
<script>
  const campo = document.getElementById("campo");
  const info = document.getElementById("info");

  campo.addEventListener("input", () => {
    info.textContent = campo.value.length + " caracteres";
  });

  campo.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      campo.value = "";
      info.textContent = "Campo vaciado";
    }
  });
</script>

Página (resultado)

Consola

8.Más opciones de addEventListener

Opción	Efecto	Ejemplo
`{ once: true }`	El manejador se ejecuta una sola vez	`boton.addEventListener("click", f, { once: true })`
`removeEventListener`	Quita un manejador (necesita la misma función)	`boton.removeEventListener("click", f)`
`{ passive: true }`	Promete no cancelar (mejora el rendimiento del scroll)	`addEventListener("scroll", f, { passive: true })`

Un manejador nombrado se puede quitar

function saludar() { console.log("¡Hola!"); }

boton.addEventListener("click", saludar);
boton.removeEventListener("click", saludar);     // funciona porque es la misma función

// Con una flecha anónima NO se puede quitar:
boton.addEventListener("click", () => console.log("x"));

💡 Consejo · Debounce

Para eventos que se disparan muchísimas veces (input, scroll, resize), conviene esperar a que el usuario pare antes de hacer algo costoso. Esa técnica se llama *debounce* y se apoya en setTimeout, que verás en la siguiente lección.

9.Errores frecuentes

addEventListener("click", funcion()) con paréntesis: se ejecuta de inmediato.
Olvidar e.preventDefault() en un submit: la página se recarga y «desaparece» todo.
Escuchar click en el botón del formulario en lugar de submit en el formulario.
Leer .value como si fuera número: es texto. "2" + "3" es "23".
Añadir un manejador por cada elemento de una lista en vez de usar delegación.
Esperar que un manejador funcione sobre elementos que aún no existen (usa delegación).
Eventos en div sin teclado: inaccesible. Usa button.
Manejadores dentro de bucles que acaban duplicados al repintar: se ejecutan varias veces.
Atributos como onclick="…" en el HTML: difíciles de mantener.

📒 Apuntes para llevar

elemento.addEventListener("evento", funcion) ejecuta tu función cuando ocurre el evento; pasa la función, no la llames.
Eventos habituales: click, input, change, submit, keydown, focus, DOMContentLoaded.
El objeto del evento (e) da target, key, type… y preventDefault() cancela la acción por defecto.
En un formulario escucha submit y llama a e.preventDefault(); lee los campos con .value, .checked o FormData.
Los valores de los campos son texto: conviértelos con Number().
Valida con mensajes dentro de la página, enlazados con aria-describedby y anunciados con role="alert".
Los eventos burbujean: la delegación pone un solo manejador en el contenedor y usa e.target.closest(…).
Usa button para acciones, soporta el teclado y evita onclick en el HTML.

10.Glosario

Término	Significado
Evento	Algo que ocurre en la página (clic, tecla, envío…).
Manejador (handler)	Función que se ejecuta cuando ocurre un evento.
`addEventListener`	Método que registra un manejador para un evento.
Objeto del evento	Información que recibe el manejador (`e`).
`preventDefault()`	Cancela el comportamiento por defecto del navegador.
Burbujeo (bubbling)	Propagación del evento desde el elemento hacia sus ancestros.
Delegación	Un manejador en el padre que atiende a los hijos usando `e.target`.
`FormData`	Objeto que reúne los valores de un formulario.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cuál es la forma correcta de asociar una función a un clic?

Un formulario recarga la página al enviarse. ¿Cómo evitarlo?

preventDefault cancela el envío por defecto.

input.value de un input type="number" con «5» es…

¿Para qué sirve la delegación de eventos?

¿Por qué es mejor un <button> que un <div> con click?

Un div no recibe foco ni se activa con Enter ni Espacio.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio