synthetic-event

A collection of base classes for custom events and event targets.

Usage no npm install needed!

<script type="module">
  import syntheticEvent from 'https://cdn.skypack.dev/synthetic-event';
</script>

README

Synthetic Event

Build status NPM version Dependencies

This library provides a simplified implementation of the two interfaces Event and 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 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";

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
import { Event } from "synthetic-event";

export class MyEvent extends Event {

    constructor(type) {

        super(type);

        this.myData = null;

    }

}
Custom EventTargets
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.