event-target-shim
An implementation of WHATWG EventTarget
interface and WHATWG Event
interface. This implementation supports constructor, passive
, once
, and signal
.
This implementation is designed ...
- Working fine on both browsers and Node.js.
- TypeScript friendly.
Native Support Information:
Feature | IE | Edge | Firefox | Chrome | Safari | Node.js |
---|
Event constructor | ❌ | 12 | 11 | 15 | 6 | 15.4.0 |
EventTarget constructor | ❌ | 87 | 84 | 87 | 14 | 15.4.0 |
passive option | ❌ | 16 | 49 | 51 | 10 | 15.4.0 |
once option | ❌ | 16 | 50 | 55 | 10 | 15.4.0 |
signal option | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
💿 Installation
Use npm or a compatible tool.
npm install event-target-shim
📖 Getting started
import { EventTarget, Event } from "event-target-shim";
// constructor (was added to the standard on 8 Jul 2017)
const myNode = new EventTarget();
// passive flag (was added to the standard on 6 Jan 2016)
myNode.addEventListener(
"hello",
(e) => {
e.preventDefault(); // ignored and print warning on console.
},
{ passive: true }
);
// once flag (was added to the standard on 15 Apr 2016)
myNode.addEventListener("hello", listener, { once: true });
myNode.dispatchEvent(new Event("hello")); // remove the listener after call.
// signal (was added to the standard on 4 Dec 2020)
const ac = new AbortController();
myNode.addEventListener("hello", listener, { signal: ac.signal });
ac.abort(); // remove the listener.
- For browsers, there are two ways:
- use a bundler such as Webpack to bundle. If you want to support IE11, use
import {} from "event-target-shim/es5"
instead. It's a transpiled code by babel. It depends on @baebl/runtime
(^7.12.0
) package.
- use CDN such as
unpkg.com
. For example, <script src="https://unpkg.com/event-target-shim@6.0.2"></script>
will define EventTargetShim
global variable.
- The
AbortController
class was added to the standard on 14 Jul 2017. If you want the shim of that, use abort-controller package.
Runnable Examples
📚 API Reference
See docs/reference.md.
💥 Migrating to v6
See docs/migrating-to-v6.md.
📰 Changelog
See GitHub releases.
🍻 Contributing
Contributing is welcome ❤️
Please use GitHub issues/PRs.
Development tools
npm install
installs dependencies for development.
npm test
runs tests and measures code coverage.
npm run watch:mocha
runs tests on each file change.