1. ¿Qué es un evento?

En el contexto del navegador, un evento es cualquier acción que ocurre en la página: un clic del ratón, una pulsación de tecla, la carga de un recurso, o incluso un cambio de estado interno definido por el propio código (eventos personalizados).

Cuando ocurre un evento, el motor del navegador crea un evento objeto (Event o una sub‑clase como MouseEvent) que contiene información contextual (tipo, objetivo, coordenadas, etc.).

2. Tipos de eventos en JavaScript

3. Listeners: cómo suscribirse a los eventos

El método estándar para registrar un listener es addEventListener:

element.addEventListener('click', handler, { capture: false, once: true, passive: true });

Los parámetros opcionales (capture, once, passive) permiten controlar la fase de propagación, la auto‑desconexión y la optimización de rendimiento.

Para remover un listener se usa removeEventListener con la misma referencia de la función:

element.removeEventListener('click', handler);

4. Ejemplos prácticos

4.1. Click simple

document.getElementById('btn').addEventListener('click', function (e) {
  console.log('Botón pulsado', e.target.id);
});

4.2. Event Delegation (delegación de eventos)

Ideal para listas dinámicas o tablas grandes, evita registrar miles de listeners.

document.querySelector('#lista').addEventListener('click', function (e) {
  if (e.target && e.target.matches('li.item')) {
    console.log('Elemento:', e.target.textContent);
  }
});

4.3. Custom Event con detalle

// Crear el evento
const data = { user: 'Ana', action: 'login' };
const loginEvent = new CustomEvent('userLogin', { detail: data, bubbles: true, cancelable: true });
// Escuchar
document.addEventListener('userLogin', function (e) {
  console.log('Login detectado:', e.detail);
});
// Disparar
document.dispatchEvent(loginEvent);

5. Comparativa: Registro directo vs Delegación

6. Buenas prácticas y optimización

• Usar passive: true en listeners de scroll o touch para evitar bloqueos de renderizado.
• Limitar el uso de capture a casos específicos; la fase burbujeante es la predeterminada y más fácil de depurar.
• Desconectar listeners cuando el componente se destruye (SPA, Web Components).
• Preferir delegación en listas o tablas extensas.
• Validar datos del detail de eventos personalizados para evitar vulnerabilidades de inyección.
• Evitar funciones anónimas si necesitas remover el listener más adelante.

7. Seguridad y manejo de errores

Los eventos pueden ser una vía de ataque si se confía ciegamente en los datos recibidos:

• Sanitiza siempre el contenido de event.target.innerHTML antes de insertarlo en el DOM.
• Usa event.stopPropagation() con cautela; bloquear la propagación puede impedir que otros componentes reaccionen a eventos críticos.
• Implementa try / catch dentro de los handlers para que errores inesperados no rompan la cadena de eventos.

button.addEventListener('click', function (e) {
  try {
    // lógica delicada
  } catch (err) {
    console.error('Error en handler:', err);
  }
});

8. Depuración (debugging)

Herramientas útiles:

• Chrome DevTools → "Event Listener Breakpoints" para pausar en cualquier click, keydown, etc.
• Console API: console.log(e.type, e.target) dentro del handler.
• Utilizar getEventListeners(node) (Chrome) para inspeccionar listeners registrados.

9. Compatibilidad y rendimiento

Los métodos addEventListener y CustomEvent son compatibles con todos los navegadores modernos (Chrome, Edge, Firefox, Safari) desde versiones anteriores a 2015. En navegadores muy antiguos (IE9‑) se necesita attachEvent o polyfills.

En cuanto a rendimiento:

• Los listeners con passive: true reducen el tiempo de bloqueo del hilo principal en scroll/touch.
• La delegación disminuye la cantidad de objetos Listener, reduciendo la presión del GC.
• Evita crear listeners dentro de bucles que se ejecuten frecuentemente (p.ej., en requestAnimationFrame).

10. Escalabilidad y patrones arquitectónicos

En aplicaciones de gran escala (SPA, micro‑frontends) se recomienda:

• Centralizar la gestión de eventos mediante un Event Bus (por ejemplo, mitt, EventEmitter3).
• Utilizar Web Components y exponer eventos custom para la comunicación entre componentes.
• Seguir el patrón Observer para desacoplar lógica de UI de la lógica de negocio.

import mitt from 'mitt';
const bus = mitt();
// Emisor
bus.emit('data:loaded', payload);
// Receptor
bus.on('data:loaded', data => console.log('Datos recibidos', data));