or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-wolfy87-eventemitter

Event based JavaScript for the browser with comprehensive event management API

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/wolfy87-eventemitter@5.2.x

To install, run

npx @tessl/cli install tessl/npm-wolfy87-eventemitter@5.2.0

index.mddocs/

EventEmitter

Event-based JavaScript for the browser providing a comprehensive event management system with RegExp support, listener manipulation, and Node.js-compatible API. Zero dependencies with full TypeScript support.

Package Information

  • Package Name: wolfy87-eventemitter
  • Package Type: npm
  • Language: JavaScript (ES5) with TypeScript definitions
  • Installation: npm install wolfy87-eventemitter
  • License: Unlicense (public domain)

Core Imports

ES6/TypeScript:

import EventEmitter from "wolfy87-eventemitter";

Or with namespace import:

import * as EventEmitter from "wolfy87-eventemitter";

CommonJS/Node.js:

const EventEmitter = require("wolfy87-eventemitter");

AMD:

define(["EventEmitter"], function(EventEmitter) {
  // Use EventEmitter
});

Browser global:

<script src="EventEmitter.js"></script>
<script>
  // EventEmitter is available globally
</script>

Basic Usage

import EventEmitter from "wolfy87-eventemitter";

// Create an EventEmitter instance
const emitter = new EventEmitter();

// Add a listener
emitter.on("data", (value) => {
  console.log("Received:", value);
});

// Emit an event
emitter.emit("data", "Hello World");

// Add a listener that runs only once
emitter.once("error", (err) => {
  console.error("Error occurred:", err);
});

// Remove a specific listener
function myHandler(data) {
  console.log("Handler:", data);
}
emitter.on("test", myHandler);
emitter.off("test", myHandler);

// Remove all listeners for an event
emitter.removeAllListeners("data");

Architecture

EventEmitter is built around several key components:

  • Universal Module Pattern: Compatible with browser globals, CommonJS, AMD, and ES6 modules
  • RegExp Event Matching: Support for regular expressions in event names for pattern-based listeners
  • Method Chaining: All methods return the EventEmitter instance for fluent API usage
  • Duplicate Prevention: Automatically prevents duplicate listener registration
  • Auto-removal System: Listeners can be automatically removed based on return values
  • Namespace Protection: No-conflict mode for global usage scenarios

Capabilities

Event Listener Management

Core functionality for retrieving and inspecting registered event listeners.

/**
 * Returns the listener array for the specified event.
 * Supports RegExp patterns for matching multiple events.
 */
getListeners(event: string | RegExp): Function[] | { [event: string]: Function[] };

/**
 * Always returns listeners in object format, useful for internal operations.
 */
getListenersAsObject(event: string | RegExp): { [event: string]: Function[] };

/**
 * Converts array of listener objects to array of listener functions.
 */
flattenListeners(listeners: { listener: Function }[]): Function[];

Adding Event Listeners

Methods for registering event listeners with various behaviors.

/**
 * Adds a listener function to the specified event.
 * Prevents duplicate registration and supports RegExp events.
 */
addListener(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Alias of addListener for Node.js compatibility.
 */
on(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Adds a listener that automatically removes itself after first execution.
 */
addOnceListener(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Alias of addOnceListener for Node.js compatibility.
 */
once(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Bulk add listeners to events. Supports object mapping for multiple events.
 */
addListeners(event: string | RegExp, listeners: Function[]): EventEmitter;
addListeners(event: MultipleEvents): EventEmitter;

Usage Examples:

const emitter = new EventEmitter();

// Basic listener registration
emitter.on("message", (text) => console.log(text));

// RegExp event matching (requires defineEvent first)
emitter.defineEvent("user:login");
emitter.defineEvent("user:logout");
emitter.on(/user:.*/, (action) => console.log("User action:", action));

// One-time listeners
emitter.once("init", () => console.log("Application initialized"));

// Bulk listener registration
emitter.addListeners("error", [
  (err) => console.error("Error 1:", err),
  (err) => console.error("Error 2:", err),
]);

// Multiple events with object mapping
emitter.addListeners({
  "start": () => console.log("Started"),
  "stop": () => console.log("Stopped"),
});

Removing Event Listeners

Methods for unregistering event listeners in various ways.

/**
 * Removes a specific listener function from an event.
 * Supports RegExp patterns for bulk removal.
 */
removeListener(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Alias of removeListener for Node.js compatibility.
 */
off(event: string | RegExp, listener: Function): EventEmitter;

/**
 * Bulk remove listeners from events. Supports object mapping.
 */
removeListeners(event: string | RegExp, listeners: Function[]): EventEmitter;
removeListeners(event: MultipleEvents): EventEmitter;

/**
 * Removes all listeners from specified event, or all events if no parameter.
 */
removeEvent(event?: string | RegExp): EventEmitter;

/**
 * Alias of removeEvent, mirrors Node.js API.
 */
removeAllListeners(event?: string | RegExp): EventEmitter;

Event Definition

Methods for pre-defining events, required for RegExp listener matching.

/**
 * Pre-defines an event name for RegExp pattern matching.
 * Required before using RegExp patterns with listeners.
 */
defineEvent(event: string): EventEmitter;

/**
 * Pre-defines multiple event names using defineEvent.
 */
defineEvents(events: string[]): EventEmitter;

Usage Examples:

const emitter = new EventEmitter();

// Define events for RegExp matching
emitter.defineEvents(["user:login", "user:logout", "user:register"]);

// Now RegExp patterns will work
emitter.on(/user:.*/, (data) => console.log("User event:", data));
emitter.emit("user:login", { userId: 123 });

Event Emission

Methods for triggering events and executing their listeners.

/**
 * Emits an event with optional arguments array.
 * Supports RegExp patterns for emitting to multiple events.
 */
emitEvent(event: string | RegExp, args?: any[]): EventEmitter;

/**
 * Alias of emitEvent.
 */
trigger(event: string | RegExp, args?: any[]): EventEmitter;

/**
 * Emits an event with variadic arguments (Node.js style).
 * Arguments are passed individually to listeners.
 */
emit(event: string | RegExp, ...args: any[]): EventEmitter;

Usage Examples:

const emitter = new EventEmitter();

// Basic event emission
emitter.on("greet", (name, greeting) => {
  console.log(`${greeting}, ${name}!`);
});

// Using emit (variadic arguments)
emitter.emit("greet", "Alice", "Hello");

// Using emitEvent (arguments array)
emitter.emitEvent("greet", ["Bob", "Hi"]);

// RegExp emission (to multiple events)
emitter.defineEvents(["log:info", "log:warn", "log:error"]);
emitter.on(/log:.*/, (level, message) => {
  console.log(`[${level}] ${message}`);
});
emitter.emit(/log:.*/, "info", "Application started");

Advanced Configuration

Low-level methods for bulk manipulation and auto-removal configuration.

/**
 * Low-level bulk listener manipulation (add/remove).
 * Used internally by addListeners and removeListeners.
 */
manipulateListeners(
  remove: boolean,
  event: string | RegExp | MultipleEvents,
  listeners?: Function[]
): EventEmitter;

/**
 * Sets the return value that triggers automatic listener removal.
 * Default value is true.
 */
setOnceReturnValue(value: any): EventEmitter;

Static Methods

Class-level utility methods.

/**
 * Reverts global EventEmitter to previous value and returns this version.
 * Useful for avoiding naming conflicts in browser environments.
 */
static noConflict(): typeof EventEmitter;

Usage Example:

// In browser global context
const MyEventEmitter = EventEmitter.noConflict();
// Now EventEmitter global is restored to previous value
// Use MyEventEmitter for this library's functionality

Types

/**
 * Hash object for manipulating multiple events simultaneously.
 */
interface MultipleEvents {
  [event: string]: Function | Function[];
}

/**
 * Main EventEmitter class for managing events.
 * Can be extended to provide event functionality in other classes.
 */
class EventEmitter {
  constructor();
}

/**
 * Namespace containing all EventEmitter types and interfaces.
 */
declare namespace Wolfy87EventEmitter {
  interface MultipleEvents {
    [event: string]: any; // Function | Function[]
  }
  
  export class EventEmitter {
    // All instance and static methods as defined above
  }
}

Error Handling

The EventEmitter will throw TypeError exceptions in the following cases:

  • Invalid Listener: When addListener, addOnceListener, on, or once methods receive a non-function argument as the listener parameter
  • Type Validation: Uses internal isValidListener() helper for type checking

Error Handling Example:

const emitter = new EventEmitter();

try {
  emitter.on("test", "not a function"); // Throws TypeError
} catch (error) {
  console.error("Invalid listener:", error.message);
}

Advanced Usage Patterns

Extending EventEmitter

class MyClass extends EventEmitter {
  constructor() {
    super();
  }
  
  doSomething() {
    // Perform action
    this.emit("action", "something happened");
  }
}

Auto-removal Configuration

const emitter = new EventEmitter();

// Configure custom auto-removal value
emitter.setOnceReturnValue("REMOVE_ME");

emitter.on("test", () => {
  console.log("This listener will be removed");
  return "REMOVE_ME"; // Triggers auto-removal
});

emitter.emit("test"); // Listener executes and removes itself
emitter.emit("test"); // No output - listener was removed

Complex RegExp Patterns

const emitter = new EventEmitter();

// Define various event namespaces
emitter.defineEvents([
  "api:get:users",
  "api:post:users", 
  "api:get:posts",
  "db:connect",
  "db:query"
]);

// Listen to all API events
emitter.on(/^api:.*/, (method, resource, data) => {
  console.log(`API ${method} ${resource}:`, data);
});

// Listen to specific patterns
emitter.on(/^api:get:.*/, (resource, query) => {
  console.log(`GET ${resource} with query:`, query);
});