Event Bus = Observer + Mediator

Every module wired to every other module

App-wide events — login, cart change, theme switch — need to reach many unrelated modules. Wire them directly and you get a tangled many-to-many mess.

function login(user) {
  navbar.greet(user);
  cart.sync(user);
  analytics.track('login', user);
  chat.connect(user);  // ← new consumer? edit here too…
}

One hub, subscribed by name

A central Event Bus is a Mediator — the one hub everything talks to — that uses Observer semantics: subscribe and broadcast by event name, not by direct reference.

class EventBus {
  handlers = {};

  on(event, fn) {
    (this.handlers[event] ??= []).push(fn);
  }

  off(event, fn) {
    this.handlers[event] =
      (this.handlers[event] || []).filter(h => h !== fn);
  }

  emit(event, data) {
    (this.handlers[event] || []).forEach(fn => fn(data));
  }
}
// bus.on('login', fn); bus.emit('login', user);

Emit an event — only subscribers react

Navbar listens for login, Cart listens for addToCart, Analytics listens for both. Emit an event and watch the bus fan it out to only the subscribed modules.

Tip: click a module to unsubscribe it, then emit again.

Decoupled by event name

• Decoupling: modules only know event names, never each other's identity or API.
• Named channels: 'login', 'addToCart' — any module can subscribe or emit.
• Easy add/remove: new listeners plug in with on(); no existing code changes.
• Caution: global events are harder to trace/debug, ordering isn't guaranteed, and forgetting off() leaks memory.
• Real uses: Node's EventEmitter, browser CustomEvent/DOM events, Redux middleware, Vue/React app-wide event buses.