synthetic-event

Synthetic Event

This library provides a simplified implementation of the EventTarget interface. The included classes and interfaces can be used to create synthetic events and custom event targets in any environment.

If your focus lies on DOM events, please refer to the native CustomEvent class. An alternative way to create custom event targets in a browser environment is to use a DocumentFragment as a dummy target.

Documentation

Installation

npm install synthetic-event

Usage

Basics

import { Event, EventTarget } from "synthetic-event";

export interface MyEventMap {

	test: Event<"test">;

}

const eventTarget = new EventTarget<MyEventMap>();

eventTarget.addEventListener("test", (event) => {

	console.log("listener function", event.target);

});

eventTarget.addEventListener("test", {

	handleEvent(event) {

		console.log("listener object", event.target);

	}

});

eventTarget.dispatchEvent({ type: "test" });

Custom EventTarget

import { Event, EventTarget } from "synthetic-event";

export interface MyEventMap {

	tick: Event<"tick">;

}

export class MyEventTarget extends EventTarget<MyEventMap> {

	private readonly myEvent: Event<"tick">;

	constructor() {

		super();

		this.myEvent = { type: "tick" };
		setInterval(() => this.dispatchEvent(this.myEvent), 1000);

	}

}

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.