JavaScript de Cero a Experto / Eventos y listeners
El objeto event: el acta del suceso
Cuando ocurre un evento, el navegador no solo ejecuta tu función: le ENTREGA un objeto cargado de información — qué pasó, sobre qué elemento, qué tecla, qué texto. Aprender a leer ese objeto es pasar de "el botón hace algo" a "sé exactamente qué está haciendo el usuario".
El acta del incidente
Ahí está el poder de event.target: los tres botones comparten UNA
función, y el acta le cuenta cuál fue tocado. Sin target habrías escrito
tres funciones casi idénticas — con él, escribes lógica genérica que se
adapta al origen. Guarda esta idea: en la lección de delegación se
convierte en EL patrón de las listas.
Teclas: keydown y event.key
event.key trae la tecla como string legible: letras tal cual ("a"),
y las especiales con nombre: "Enter", "Escape", "ArrowUp",
"Backspace". Con eso construyes atajos de teclado, navegación con
flechas, cerrar con Escape — los detalles que hacen que una app se sienta
profesional (y que la accesibilidad de maquetación exigía: todo usable sin
mouse).
Escuchar mientras escriben: input
La cadena event.target.value se lee de corrido: "del acta, el elemento
origen; de ese elemento, su valor actual". Es el mecanismo de TODA
interfaz que reacciona mientras escribes — buscadores que filtran,
contadores de caracteres, validaciones en vivo. Existe también el evento
change, su primo tranquilo: se dispara solo cuando el usuario TERMINA
(sale del campo); útil para selects y checkboxes.
Quieres que al presionar Enter dentro del input se registre el gasto. ¿Cuál listener lo detecta?
Mini-reto
Combina las tres actas: un input de "valor del gasto" que 1) con input
muestre en vivo el valor formateado con tu Intl de pesos (módulo 6) en un
<strong> al lado; 2) con keydown detecte Enter e imprima "registrar:"
con el valor; 3) con Escape limpie el campo (event.target.value = "").
Tres listeners, un campo, y ya se siente app de verdad.
Qué sigue
Ya escuchas clics, teclas y escritura. El siguiente escenario es donde todo
eso converge: el FORMULARIO — con su evento submit, su comportamiento por
defecto de recargar la página (que aprenderás a frenar con
preventDefault) y la entrada de datos de "Mi Bolsillo".