Eventos y elementos dinámicos

Tres horas. Media hora para entender cómo se escucha lo que hace una persona, cómo viaja un evento por el árbol y cómo se crea un elemento, y dos horas y media haciendo que tu página reaccione y genere su propio marcado.

Se explica

25 minutos · conceptos y demostración

Tres piezas que hoy encajan entre sí: escuchar, averiguar quién provocó la acción, y crear los elementos sobre los que se actuará. La tercera obliga a la primera a hacerse de una forma concreta, y de ahí sale la delegación.

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 3 de la UD3: tú no la llamas, la llama el navegador cuando ocurre algo.

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.

Qué trae el evento, y por dónde pasa

catalogo.addEventListener("click", (evento) => {
  evento.target;            // el elemento exacto donde se pulsó
  evento.currentTarget;     // el elemento que escucha
  evento.type;              // "click"
  evento.key;               // en eventos de teclado
  evento.preventDefault();
  evento.stopPropagation();
});

La pareja target / currentTarget es la clave de la sesión: puedes escuchar en el contenedor y averiguar dentro cuál de sus hijos recibió la acción. Eso es posible porque un clic no ocurre solo en un elemento, sino que recorre el árbol:

El burbujeo explica también un fallo característico: pulsar en un botón dentro de una tarjeta que también escucha el clic dispara los dos manejadores.

Delegar

catalogo.addEventListener("click", (evento) => {
  const boton = evento.target.closest("[data-accion='añadir']");
  if (!boton) return;                     // el clic no era en un botón nuestro

  const id = Number(boton.dataset.id);
  añadirAlCarrito(id);
});

Tres ventajas, y son grandes: una sola escucha en lugar de cincuenta; funciona con las tarjetas que tu código creará después; y no hay que registrar nada de nuevo tras volver a pintar.

closest

Sube por los antepasados desde el elemento pulsado hasta encontrar uno que case con el selector. Resuelve el problema de que el clic caiga en un icono o en el texto de dentro del botón, y no en el botón mismo.

El teclado se atiende con su propio evento cuando hace falta una tecla concreta:

buscador.addEventListener("keydown", (evento) => {
  if (evento.key === "Escape") limpiarBusqueda();
});

Si delegas clics en elementos que son botones de verdad, en cambio, el teclado ya funciona: pulsar Intro sobre un botón genera un click. Es otra razón para usar el elemento correcto en lugar de un div decorado.

Crear, rellenar, insertar

const item = document.createElement("li");
item.className = "producto";
item.dataset.id = producto.id;

const titulo = document.createElement("h3");
titulo.textContent = producto.nombre;

item.append(titulo);
catalogo.append(item);          // al final

Añadir cincuenta elementos uno a uno hace que el navegador recalcule la página cincuenta veces. Se construyen aparte y se insertan juntos:

const fragmento = document.createDocumentFragment();

for (const producto of productos) {
  fragmento.append(crearTarjeta(producto));
}

catalogo.replaceChildren(fragmento);

Para vaciar un contenedor:

catalogo.replaceChildren();        // lo deja vacío
catalogo.innerHTML = "";           // funciona, pero pasa por el analizador

replaceChildren() es más claro y más seguro, y admite también los nuevos hijos de una vez.

La función que lo construye devuelve el elemento sin insertarlo: quien la llama decide dónde va. Es la misma regla de la UD3 —calcular y devolver— aplicada al DOM.

export function crearTarjeta(producto) {
  const item = document.createElement("li");
  item.className = "producto";
  item.dataset.id = producto.id;

  const titulo = document.createElement("h3");
  titulo.textContent = producto.nombre;

  const imagen = document.createElement("img");
  imagen.src = producto.imagen;
  imagen.alt = producto.textoAlternativo;
  imagen.loading = "lazy";

  const precio = document.createElement("p");
  precio.className = "precio";
  precio.textContent = formatearPrecio(producto.precio);

  item.append(imagen, titulo, precio);
  return item;
}

El diagnóstico de esta unidad

Ese último caso es el que resuelve la delegación, y por eso los tres bloques de hoy son en realidad uno.

Se trabaja

150 minutos · práctica sobre tu propio proyecto

Los tres primeros pasos construyen la interacción; los dos últimos comprueban lo que casi nadie comprueba: que el marcado generado siga siendo válido y que todo se pueda usar sin ratón.

Paso 1 · Tu página reacciona · 30 min

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. Prueba la diferencia entre input y change en el mismo campo, y anótala.

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

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

Antes de continuar: el formulario no recarga la página, y sabes decir en qué línea lo has impedido.

Paso 2 · Un manejador para todos · 40 min

1. Añade a cada tarjeta de tu catálogo un botón con data-accion y data-id.
2. Registra una sola escucha en el contenedor.
3. Usa closest para localizar el botón y dataset para el identificador.
4. Añade una segunda acción y distínguela por su data-accion.
5. Comprueba con el teclado que ambas funcionan.
6. Registra una escucha en el contenedor y otra en la tarjeta, y observa el orden en que se disparan. Anótalo: es el burbujeo, visto en tu propia página.

Paso 3 · La tarjeta generada · 45 min

Es el trabajo central de la sesión.

1. Escribe crearTarjeta(producto) en js/render.js, que devuelva el elemento sin insertarlo.
2. Genera con ella las tarjetas de tres productos y añádelas con un fragmento.
3. Añade un botón de acción con sus atributos data-.
4. Escribe vaciarCatalogo() con replaceChildren() y comprueba que las escuchas delegadas siguen funcionando después de vaciar y volver a pintar.
5. Añade el estado «agotado» como clase para el CSS y como texto para quien no ve la pantalla. No basta con el color.

<template data-js="plantilla-producto">
  <li class="producto">
    <h3></h3>
    <p class="precio"></p>
  </li>
</template>

const plantilla = document.querySelector("[data-js='plantilla-producto']");
const copia = plantilla.content.cloneNode(true);
copia.querySelector("h3").textContent = producto.nombre;

Paso 4 · Valida lo que ha escrito tu código · 15 min

1. Compara el marcado generado en el paso 3 con el que tenías escrito a mano en la UD1. ¿Es igual de semántico?
2. Abre Elements, copia el bloque del catálogo entero y pásalo por validator.w3.org.
3. Comprueba la jerarquía de encabezados del documento con las tarjetas ya pintadas. Si tu h3 cuelga de un h1 sin h2 en medio, el salto lo ha creado tu JavaScript.
4. Revisa que cada imagen generada tiene su alt, y que ese alt sale de un campo de datos y no de una cadena fija.

Paso 5 · Todo esto, sin ratón · 20 min

Suelta el ratón y recorre la página con Tab, Shift + Tab, Intro y Espacio.

1. ¿Puedes llegar a los botones generados por tu código?
2. ¿Se ve el foco sobre ellos, con el :focus-visible de la UD2?
3. ¿Funcionan las dos acciones delegadas?
4. Añade un atajo: Escape limpia la búsqueda, e Intro en el buscador aplica el filtro.
5. Después de vaciar y repintar el catálogo, ¿dónde se ha quedado el foco? Anótalo. Es un problema real que resolverás en la sesión 6.

Ampliación si has completado el trabajo

Primero termina y comprueba los cinco pasos. Los dos retos miden el coste de dos atajos que parecen inofensivos.

Reto 1 · Cuánto cuesta un botón falso

<div class="boton" onclick="comprar()">Comprar</div>

1. Móntalo y comprueba con el teclado qué no hace: enumera las cuatro cosas que un <button> trae de fábrica y este no.
2. Recontrúyelas una a una: hazlo enfocable, que responda a Intro y a Espacio, que se anuncie como botón, y que tenga foco visible. Cuenta las líneas de HTML, CSS y JavaScript que te ha costado.
3. Compara ese recuento con escribir <button type="button">.
4. Queda todavía una diferencia que no has podido reconstruir del todo: averigua qué ocurre con ese falso botón dentro de un formulario, y con el modo de alto contraste del sistema.
5. Escribe en tres líneas por qué este ejercicio no va de accesibilidad, sino de no reprogramar lo que la plataforma ya hace. Es la misma conclusión que sacaste en la UD1 con details y progress.

Reto 2 · El menú que deja de cerrarse

Monta esta situación, que es completamente habitual:

· Un menú desplegable que se abre con un botón.
· Una escucha en `document` que lo cierra al pulsar en cualquier otro sitio.
· Un catálogo de tarjetas; cada tarjeta abre el detalle al pulsarla.
· Dentro de cada tarjeta, un botón «Añadir» que NO debe abrir el detalle.

1. Resuelve el botón «Añadir» con stopPropagation y comprueba que funciona.
2. Ahora abre el menú y pulsa ese botón. El menú no se cierra. Explica exactamente por qué, siguiendo el camino del evento.
3. Resuélvelo de nuevo sin stopPropagation: el manejador de la tarjeta debe filtrar por target y salir pronto si el clic venía de un botón de acción.
4. Comprueba que ahora el menú sí se cierra y que el detalle sigue sin abrirse.
5. Enuncia la regla en una frase: quién debe decidir si un evento le incumbe, el que lo emite o el que lo escucha.

Cierre

5 minutos · comprobación y recuerdo