https://github.com/vanruesc/synthetic-event
A collection of base classes for the creation of custom events and event targets.
https://github.com/vanruesc/synthetic-event
custom event event-target
Last synced: 4 months ago
JSON representation
A collection of base classes for the creation of custom events and event targets.
- Host: GitHub
- URL: https://github.com/vanruesc/synthetic-event
- Owner: vanruesc
- License: zlib
- Archived: true
- Created: 2017-02-07T20:29:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T20:01:21.000Z (almost 2 years ago)
- Last Synced: 2025-01-08T15:55:36.097Z (4 months ago)
- Topics: custom, event, event-target
- Language: TypeScript
- Homepage:
- Size: 253 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Synthetic Event
[](https://travis-ci.org/vanruesc/synthetic-event)
[](http://badge.fury.io/js/synthetic-event)
[](https://david-dm.org/vanruesc/synthetic-event)
This library provides a simplified implementation of the two interfaces [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) and [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget). The included base classes 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](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
```js
import { Event, EventTarget } from "synthetic-event";
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(new Event("test"));
```
##### Custom Events
```js
import { Event } from "synthetic-event";
export class MyEvent extends Event {
constructor(type) {
super(type);
this.myData = null;
}
}
```
##### Custom EventTargets
```js
import { Event, EventTarget } from "synthetic-event";
export class MyEventTarget extends EventTarget {
constructor() {
super();
this.myEvent = new Event("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.