Event Handling Patterns in JavaScript Applications

When building interactive web applications, components need to talk to each other without creating tight dependencies. eventemitter3, mitt, and pubsub-js all solve this problem, but they take different approaches to API design and scope. Let's compare how they handle common engineering tasks.

🏗️ API Style: Instances vs Global Static

The biggest difference lies in how you create and use the event system.

eventemitter3 requires you to create an instance for each event source.

• You import the class and initialize it.
• This allows multiple independent event channels.

// eventemitter3: Instance-based
import EventEmitter from 'eventemitter3';

const emitter = new EventEmitter();

emitter.on('update', (data) => {
  console.log(data);
});

emitter.emit('update', { id: 1 });

mitt also uses an instance-based approach.

• You call the default export to create a bus.
• Similar to eventemitter3 but with a smaller footprint.

// mitt: Instance-based
import mitt from 'mitt';

const emitter = mitt();

emitter.on('update', (data) => {
  console.log(data);
});

emitter.emit('update', { id: 1 });

pubsub-js uses a global static API.

• You do not create instances.
• All events go through a single central hub.

// pubsub-js: Global static
import PubSub from 'pubsub-js';

PubSub.subscribe('update', (msg, data) => {
  console.log(data);
});

PubSub.publish('update', { id: 1 });

🛠️ Feature Set: Basic vs Advanced

Not all libraries support the same level of control.

eventemitter3 includes advanced tools like once and removeAllListeners.

• once listens for a single event then removes itself.
• removeAllListeners clears every handler for a topic.

// eventemitter3: Advanced features
emitter.once('login', () => {
  // Runs only once
});

emitter.removeAllListeners('login');

mitt keeps things minimal.

• It only supports on, off, and emit.
• You must manually manage one-time listeners if needed.

// mitt: Basic features only
const handler = (data) => {
  emitter.off('update', handler);
  console.log(data);
};

emitter.on('update', handler);

pubsub-js focuses on subscription management.

• It returns a token when you subscribe.
• You use that token to unsubscribe later.

// pubsub-js: Token-based unsubscribe
const token = PubSub.subscribe('update', (msg, data) => {
  console.log(data);
});

PubSub.unsubscribe(token);

🧩 Scope and Isolation

How you organize events affects code maintenance.

eventemitter3 encourages isolation.

• You can pass specific emitters to components.
• This makes testing easier because you can mock specific instances.

// eventemitter3: Passing instances
function Component({ emitter }) {
  emitter.on('click', handleClick);
}

mitt also supports isolation.

• You can create multiple buses for different domains.
• Useful for separating UI events from data events.

// mitt: Multiple buses
const uiBus = mitt();
const dataBus = mitt();

uiBus.on('hover', handleHover);
dataBus.on('load', handleLoad);

pubsub-js uses a global scope.

• Any part of the app can publish or subscribe.
• This can lead to hidden dependencies if not documented well.

// pubsub-js: Global scope
// Any file can import and publish
PubSub.publish('global-event', payload);

🛡️ Type Safety and Modern Development

TypeScript support varies between these tools.

eventemitter3 has strong TypeScript definitions.

• You can define event maps for type safety.
• Helps catch errors during development.

// eventemitter3: Typed events
interface Events {
  update: { id: number };
}

const emitter = new EventEmitter<Events>();

mitt is built with TypeScript in mind.

• It uses generics to enforce event payloads.
• Very concise type definitions.

// mitt: Typed events
import mitt from 'mitt';

type Events = {
  update: { id: number };
};

const emitter = mitt<Events>();

pubsub-js has weaker type support.

• The global nature makes typing specific topics harder.
• Often requires manual type assertions.

// pubsub-js: Less strict typing
PubSub.subscribe('update', (msg, data: any) => {
  // Data type is often loosely defined
});

🌐 Real-World Scenarios

Scenario 1: Component Communication

You need to pass events between nested components without prop drilling.

• ✅ Best choice: mitt
• Why? Small size and instance-based design fit well with component lifecycles.

// mitt: Component bus
const bus = mitt();
// Pass bus via context or props

Scenario 2: Complex State Management

You need to track listeners, remove them all on cleanup, or listen once.

• ✅ Best choice: eventemitter3
• Why? Built-in once and removeAllListeners simplify cleanup logic.

// eventemitter3: Cleanup
emitter.removeAllListeners();

Scenario 3: Decoupled Modules

You have independent modules that should not know about each other.

• ✅ Best choice: pubsub-js
• Why? Global hub allows modules to communicate without sharing references.

// pubsub-js: Decoupled
// Module A publishes
PubSub.publish('data-ready', data);
// Module B subscribes independently

📌 Summary Table

💡 Final Recommendation

Think about scope and complexity.

• Need multiple isolated channels? → Use eventemitter3 (feature-rich) or mitt (minimal).
• Need a global message bus? → Use pubsub-js.
• Need strict types and cleanup tools? → Use eventemitter3.

These tools help keep your code organized — choose the one that matches your project's structure.