U-EventEmitter Demo

Basic Event System

Advanced Features

Interactive Event System

Ready for interactive events...

API Overview

EventEmitter Constructor

new EventEmitter()

Creates a new event emitter instance for custom event communication.

Core Methods

on(event, handler, slot?) → EventEmitter

emit(event, ...args) → number

off(event, handler?) → EventEmitter

clear(event?) → EventEmitter

Key Features

Slot-based Deduplication: Use slot parameter to replace existing handlers
Auto-removal: Handlers returning 'remove_handler' are automatically unsubscribed
Return Values: emit() returns the number of handlers called
Flexible Arguments: Pass any number of arguments to handlers

Examples

// Basic usage
const emitter = new EventEmitter();
emitter.on('message', (data) => {
  console.log('Received:', data);
});
emitter.emit('message', 'Hello World');

// Slot-based replacement
emitter.on('update', handler1, 'ui-updater');
emitter.on('update', handler2, 'ui-updater'); // Replaces handler1

// Self-removing handler
emitter.on('init', () => {
  console.log('Initialized!');
  return 'remove_handler'; // Removes itself
});

Event Patterns

Publisher-Subscriber Pattern

Component Communication

Handler Counting & Management

Advanced Usage

Event Management

on(event, handler, slot) - Subscribe to events
• event: String event name
• handler: Function to call when event is emitted
• slot: Optional string key for handler replacement

emit(event, ...args) - Emit events to all listeners
• Returns the number of handlers that were called
• Passes all additional arguments to handlers

off(event, handler) - Remove specific handler
• If handler omitted, removes all handlers for event

Slot System

The slot system prevents duplicate handlers by using string keys:
• Same slot key replaces previous handler
• Useful for UI updates, state management
• Prevents memory leaks from repeated subscriptions
• Slot keys are per-event, not global

// Without slots: multiple handlers
emitter.on('render', updateUI);
emitter.on('render', updateUI); // Now 2 handlers

// With slots: automatic replacement
emitter.on('render', updateUI, 'ui');
emitter.on('render', updateUI, 'ui'); // Still 1 handler

Performance Patterns

Event Namespacing: Use dot notation for hierarchical events
Batch Operations: Group related events for efficiency
Handler Cleanup: Use slots or off() to prevent memory leaks
Conditional Emission: Check handler count before expensive operations

Memory Management

Use Slots: Prevent duplicate handlers with slot keys
Clean Up: Call off() when components are destroyed
Self-removal: Use 'remove_handler' return for one-time events
Clear All: Use clear() to remove all listeners for an event

Common Patterns

// Request-Response pattern
emitter.on('data.request', (type, callback) => {
  const data = fetchData(type);
  callback(data);
});

// State change notifications
emitter.on('state.change', (oldState, newState) => {
  updateUI(newState);
  logStateChange(oldState, newState);
});

// Error handling
emitter.on('error', (error, context) => {
  console.error('Error in', context, error);
  showErrorToUser(error.message);
});

Library Info

Loading library information...