addEventListener: tu página reacciona

En el módulo pasado tu código pintó la página… una vez, al cargar. Hoy la página empieza a ESCUCHAR: un clic, y tu función se ejecuta. Ese mecanismo — eventos y listeners — es el sistema nervioso de toda aplicación web, y su puerta de entrada es un solo método: addEventListener.

El timbre de la casa

Anatomía: elemento.addEventListener(tipo, funcion). El tipo es un string ("click" hoy; teclas, formularios y más en las próximas lecciones), y la función es la de siempre — flecha, declarada, da igual — que el navegador guardará y ejecutará en cada evento. ¿Reconoces la idea? Es un callback, los del módulo 3: funciones tratadas como valores. Y ojo a la variable registrados: sobrevive entre clics porque la función se la lleva en su mochila — la clausura del módulo 3, trabajando en producción.

El error del millón: los paréntesis

// ✗ ejecuta registrar() AHORA MISMO y conecta su resultado (undefined)
boton.addEventListener("click", registrar());

// ✓ entrega la función guardada, para que el navegador la ejecute al clic
boton.addEventListener("click", registrar);

Con paréntesis, la función corre una vez al cargar la página y nunca más — y como no devuelve nada, conectaste undefined al evento. Se ve "casi bien" y por eso engaña tanto: revísalo primero cada vez que un botón "no haga nada".

Desconectar el timbre

El detalle traicionero: removeEventListener necesita LA MISMA referencia de función que conectaste. Si conectaste una flecha anónima escrita ahí mismo, no hay forma de señalarla después — escribir otra flecha idéntica NO sirve, es otra función. Regla: listener que planeas desconectar, listener con nombre. (Y guarda el setTimeout: "ejecuta esto en X milisegundos" — lo exprimirás en asincronía, módulo 9.)

Mini-reto

En el playground del contador: 1) agrega un botón "Reiniciar" que ponga registrados en 0 y actualice el texto; 2) reproduce el error del millón a propósito — conecta una función con paréntesis — y estudia el síntoma (corre al cargar, botón muerto); 3) hazle { once: true } al botón de reiniciar y decide: ¿tiene sentido un reset de un solo uso? Romper y observar: así se fija esto.

Qué sigue

Tu función ya se ejecuta con cada clic… pero está ciega: no sabe DÓNDE fue el clic, ni qué tecla se presionó, ni qué escribió el usuario. Toda esa información viaja en un paquete que el navegador le entrega a tu función: el objeto event. Próxima lección: abrirlo.