CodeForge

JavaScript de Cero a Experto / Eventos y listeners

El objeto event: el acta del suceso

Teoría20 min20 XP

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".