CustomEvent: fabrica tus propios eventos

El navegador fabrica eventos de clics y teclas; hoy fabricas los tuyos: "gasto agregado", "presupuesto excedido", "sesión cerrada". Con CustomEvent, las piezas de tu app se avisan entre sí SIN conocerse — la idea de arquitectura más importante que verás en este módulo.

El altavoz del colegio

Fabricar, disparar, escuchar

Tres piezas: new CustomEvent(nombre, opciones) fabrica el evento (los datos del suceso van en detail), dispatchEvent lo dispara, y se escucha con el addEventListener de siempre — para el oyente, tu evento y un clic son igual de legítimos:

Registra varios gastos y sigue el flujo: el botón dispara UN anuncio, y DOS paneles independientes reaccionan cada uno a lo suyo. El botón no conoce a la lista; la lista no conoce al resumen. ¿Quieres un tercer panel que alerte cuando el total pase de $ 50.000? Agregas otro oyente — sin tocar UNA línea de lo existente. Eso es desacoplar, y es la diferencia entre apps que crecen y apps que se enredan.

Detalles de oficio: el nombre con prefijo ("bolsillo:gasto", no "gasto") evita choques con eventos ajenos; detail acepta cualquier valor — aquí un objeto completo; y disparamos sobre document como tablero de anuncios global (también puedes disparar sobre un elemento concreto — agrégale bubbles: true a las opciones si necesitas que suba, porque los eventos propios NO burbujean por defecto, a diferencia del clic).

Mini-reto

Agrega al playground un tercer oyente SIN tocar los existentes: un panel "Alerta" con un <p id="alerta"></p> que escuche bolsillo:gasto y, cuando el valor del gasto supere 10000, muestre "Gasto fuerte: X" (formateado con cop). Luego dispara desde la consola del playground un evento manual con un gasto inventado y mira los TRES paneles reaccionar. Acabas de extender una app sin modificarla — el sueño de todo arquitecto.

Qué sigue

Tu app ya conecta muchos listeners — de clics, de formularios, de eventos propios. La pregunta incómoda: ¿quién los DESCONECTA cuando una sección de la app se va? Uno por uno con removeEventListener es un suplicio. La próxima lección trae el interruptor maestro: AbortController.