Marc Semper Lloret
← El DOM: la web que responde

Sesión 4 · Semana 2

Escuchar lo que hace el usuario

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es un evento, cómo se escucha y qué eventos existen.
  2. 2. Haz: Haz que tu página reaccione al clic, al teclado y al envío de un formulario.
  3. 3. Comprueba: Sabes distinguir «no salta el evento» de «salta y falla mi función».

Antes de empezar · 5 minutos, sin apuntes

  1. Enumera cinco cosas que puede hacer una persona en tu página.
  2. ¿Cuáles de ellas se pueden hacer sin ratón?
  3. ¿Qué pasa hoy cuando envías tu formulario de contacto?

Escuchar

const boton = document.querySelector("[data-js='ordenar']");

boton.addEventListener("click", () => {
  console.log("Han pulsado");
});

Tres piezas: el elemento que escucha, el tipo de evento y la función que se ejecutará. Esa función es un callback, el concepto de la sesión 8 de la UD3: tú no la llamas, la llama el navegador cuando ocurre algo.

Los eventos que usarás

Evento Ocurre cuando
click Se pulsa, con ratón o con teclado sobre un control enfocable
input Cambia el contenido de un campo, con cada tecla
change El campo pierde el foco tras cambiar, o cambia una selección
submit Se envía un formulario
keydown Se pulsa una tecla
focus / blur Un elemento gana o pierde el foco
DOMContentLoaded El documento está listo

Escucha en el elemento correcto

Para un formulario, el evento es submit en el formulario, no click en el botón. Solo así funcionan también la tecla Intro dentro de un campo y cualquier otra forma de enviar.

Y para un control que se pulsa, usa un elemento que sea pulsable de verdad. Un div con un manejador de clic no recibe el foco, no responde a la tecla Intro y no se anuncia como control: es inaccesible por construcción.

submit y preventDefault

const formulario = document.querySelector("[data-js='contacto']");

formulario.addEventListener("submit", (evento) => {
  evento.preventDefault();      // impide que se recargue la página
  console.log("Enviando…");
});

Sin preventDefault, el navegador hace lo suyo: envía y recarga. Verás tu mensaje en consola durante un instante y desaparecerá. Es el desconcierto clásico de esta sesión.

Quitar un manejador

function alPulsar() { /* ... */ }

boton.addEventListener("click", alPulsar);
boton.removeEventListener("click", alPulsar);

Para poder quitarlo hace falta la misma referencia de función, así que una flecha escrita en el sitio no se puede retirar. También puedes usar la opción { once: true } para que se ejecute una sola vez.

El diagnóstico de esta unidad

Cuando algo no responde
  1. Un console.log como primera línea del manejador
  2. ¿Aparece? El evento llega: el fallo es de tu lógica
  3. ¿No aparece? ¿Existe el elemento, o era null?
  4. ¿El nombre del evento está bien escrito?
  5. ¿El elemento se creó después de registrar la escucha?

Ese último caso es el que resuelve la sesión siguiente.

Tarea 4 · Tu página reacciona

  1. Un botón que alterna la vista compacta del catálogo.
  2. Un campo de búsqueda que escribe en consola lo tecleado con input.
  3. El formulario de contacto que evita la recarga y muestra los valores.
  4. Un botón que solo funcione una vez, con { once: true }.
  5. Comprueba que todo lo anterior se puede hacer sin ratón.
Objetivo mínimoTres eventos funcionando, incluido submit sin recarga.
Si lo tienesAñade un atajo de teclado que ponga el foco en el buscador.
RetoPon un manejador de clic en un div, intenta usarlo con el teclado y explica qué falla.

Checkpoint · fin de la sesión 4

  • Registras escuchas con las tres piezas claras.
  • Usas submit en el formulario y preventDefault.
  • Distingues input de change.
  • Compruebas si el evento llega antes de tocar la lógica.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Por qué escuchamos submit y no el clic del botón?
  2. ¿Qué hace preventDefault?
  3. ¿Qué compruebas primero si un botón no responde?
Ver respuestas

1 · Porque un formulario también se envía con Intro, y el clic no cubre ese caso.

2 · Cancela el comportamiento por defecto del navegador para ese evento.

3 · Que el evento llegue: un mensaje en la primera línea del manejador separa el problema en dos.