¿Un formulario dispara submit y recarga la pgina. Qué decisión depende del objetivo de UX?

El control del evento debe responder al flujo real de envo.

Eventos en interfaces reales: del click básico a la delegación inteligente

Aprende a diseñar interacciones mantenibles con `addEventListener`, objeto `event`, `preventDefault`, gestión de propagación y delegación para listas dinámicas.

¿Cuánto sabes de JavaScript?

📘 Teoría

Modelo mental: evento, objetivo, manejador y efecto

Antes de programar, define la interacción como una regla clara.

Piensa cada interacción con esta frase: cuando ocurra X en Y, ejecuta Z y actualiza W. Esa estructura evita callbacks confusos y facilita depuración.

No todos los eventos son iguales: algunos sirven para entrada continua (`input`), otros para intención final (`change`, `submit`) y otros para atajos de UX (`keydown`).

X: suceso

Qué ocurre exactamente.

click
submit

Y: superficie

Dónde se escucha el evento.

botón
contenedor con delegación

Z: lógica

Qué decide tu código.

validar datos
aplicar reglas de negocio

W: resultado

Qué cambia en interfaz.

actualizar texto
alternar clase

addEventListener con criterio de arquitectura

Escucha donde tenga sentido, no donde caiga primero.

`addEventListener` permite desacoplar HTML y comportamiento. Además, puedes tener varios listeners por nodo sin pisarlos entre sí.

Una buena práctica en componentes pequeños: centralizar referencias de nodos en un objeto `ui` y registrar listeners en una función `bindEvents()`.

Nombra callbacks según intención (`onSaveClick`).
Evita listeners inline en HTML.
Agrupa binding para desmontar o testear mejor.

Registro ordenado de listeners

const ui = {
  saveBtn: document.getElementById('save-btn'),
  resetBtn: document.getElementById('reset-btn')
};

function bindEvents() {
  ui.saveBtn.addEventListener('click', onSaveClick);
  ui.resetBtn.addEventListener('click', onResetClick);
}

function onSaveClick() {
  console.log('Guardar cambios');
}

function onResetClick() {
  console.log('Restablecer formulario');
}

bindEvents();

Objeto event en detalle: target vs currentTarget

Entender esta diferencia evita muchos bugs en listas y botones anidados.

`event.target` es el nodo que originó el evento; `event.currentTarget` es el nodo donde está registrado el listener. En delegación, esta distinción es obligatoria.

Cuando un botón contiene un icono y haces click en el icono, `target` puede ser el `` y no el botón. Por eso conviene usar `closest`.

target y currentTarget en acción

const panel = document.getElementById('panel');

panel.addEventListener('click', (event) => {
  console.log('target:', event.target.tagName);
  console.log('currentTarget:', event.currentTarget.id);
});

preventDefault y propagación: control fino del flujo

Controla qué acción nativa se ejecuta y cómo viaja el evento.

`preventDefault()` bloquea la acción por defecto (ej. enviar formulario o navegar en enlace). Úsalo cuando quieras validar, confirmar o procesar datos antes.

En escenarios concretos, también puede ayudarte `stopPropagation()`, pero úsalo con criterio para no ocultar eventos útiles de niveles superiores.

Interceptar submit y validar

const form = document.getElementById('profile-form');
const status = document.getElementById('submit-status');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const email = form.querySelector('input[name="email"]').value.trim();
  if (!email.includes('@')) {
    status.textContent = 'Email inválido';
    console.log('Email inválido');
    return;
  }

  status.textContent = 'Formulario válido, listo para enviar por fetch';
  console.log('Formulario válido, listo para enviar por fetch');
});

Delegación de eventos para elementos dinámicos

Un listener en el contenedor escala mejor que cientos de listeners individuales.

Cuando renderizas tarjetas o filas desde datos, agregar listeners uno a uno complica mantenimiento. Con delegación, escuchas en el padre y detectas el elemento accionable con `closest`.

Este patrón sigue funcionando aunque luego añadas nuevos nodos al contenedor, sin necesidad de re-registrar listeners.

Delegación con data-action

const list = document.getElementById('task-list');

list.addEventListener('click', (event) => {
  const btn = event.target.closest('button[data-action]');
  if (!btn) return;

  const li = btn.closest('li');
  if (!li) return;

  const action = btn.dataset.action;
  if (action === 'remove') {
    li.remove();
  }

  console.log({ action, id: li.dataset.id });
});

1 Modelo mental: evento, objetivo, manejador y efecto 2 addEventListener con criterio de arquitectura 3 Objeto event en detalle: target vs currentTarget 4 preventDefault y propagación: control fino del flujo 5 Delegación de eventos para elementos dinámicos

🧪 Aprende probando

Ejemplo Ejemplo guiado: atajo de teclado para abrir buscador Escucha `keydown` global y reacciona solo a `Ctrl + k`, con foco automático en input de búsqueda.

⌄

Ejemplo Ejemplo guiado: submit con validación de campos Intercepta envío, valida datos mínimos y muestra estado sin recargar la página.

⌄

Ejemplo Demo interactiva: tablero mini con delegación Añade tarjetas y marca completadas usando un único listener delegado sobre la lista.

⌄

Ejemplo Demo interactiva: patrón visual disparado por clicks Observa cómo un listener de click transforma estado, estilos y feedback visual con cada interacción del usuario.

⌄

Ejemplo Demo interactiva: filtros de portafolio con estado visual Usa botones, `dataset`, clases activas y alternancia de visibilidad para construir una interfaz filtrable sin recargar la página.

⌄

Ejemplo Demo interactiva: portfolio editorial filtrable Refuerza el patrón de eventos con una interfaz más completa: botones de filtro, contador de resultados, `dataset` y estado vacío.

⌄

Ejemplo Demo interactiva: manipulación de eventos en el DOM Ejemplos prácticos de manejo de eventos, delegación y propagación en interfaces interactivas.

⌄

🏁 Retos

Reto Reto 1: botón con click y doble click en paralelo Registra ambos eventos en el mismo botón y muestra mensajes distintos en un `<p>` de estado.

⌄

Reto Reto 2: delegación para eliminar filas dinámicas Con un único listener en el `<ul>`, elimina la fila correcta cuando se pulse su botón `Eliminar`.

⌄

🧰 Recursos

Enlaces útiles

MDN: Event reference MDN: addEventListener javascript.info: Introduction to browser events MDN: Event.preventDefault MDN: Event.currentTarget MDN: Event bubbling

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 24

DOM aplicado: renderizar, actualizar y depurar interfaces sin caos

Lección 26

Delegación de eventos: menos listeners, más escalabilidad

›