https://github.com/vanruesc/synthetic-event
A collection of tools for creating custom events and event targets.
https://github.com/vanruesc/synthetic-event
custom event event-target
Last synced: 5 months ago
JSON representation
A collection of tools for creating custom events and event targets.
- Host: GitHub
- URL: https://github.com/vanruesc/synthetic-event
- Owner: vanruesc
- License: zlib
- Created: 2017-02-07T20:29:18.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2026-01-10T20:35:38.000Z (5 months ago)
- Last Synced: 2026-01-11T06:09:10.731Z (5 months ago)
- Topics: custom, event, event-target
- Language: TypeScript
- Homepage:
- Size: 356 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Synthetic Event
[](https://github.com/vanruesc/synthetic-event/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/synthetic-event)
This library provides a simplified implementation of the [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) interface. The included classes and interfaces can be used to create [synthetic events](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) and custom event targets in any environment.
If your focus lies on DOM events, please refer to the native [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) class. An alternative way to create custom event targets in a browser environment is to use a [DocumentFragment](https://developer.mozilla.org/en/docs/Web/API/Document/createDocumentFragment) as a dummy target.
*[Documentation](https://vanruesc.github.io/synthetic-event)*
## Installation
```sh
npm install synthetic-event
```
## Usage
##### Basics
```ts
import { Event, EventTarget } from "synthetic-event";
export interface MyEventMap {
test: Event<"test">;
}
const eventTarget = new EventTarget();
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
```ts
import { Event, EventTarget } from "synthetic-event";
export interface MyEventMap {
tick: Event<"tick">;
}
export class MyEventTarget extends EventTarget {
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.