Gathering detailed insights and metrics for event-target-shim
Gathering detailed insights and metrics for event-target-shim
Gathering detailed insights and metrics for event-target-shim
Gathering detailed insights and metrics for event-target-shim
event-target-shim-es5
[](https://www.npmjs.com/package/event-target-shim-es5) [](https://travis-ci.org/compulim/event-ta
@xo-union/event-target-shim
An implementation of WHATWG EventTarget interface.
@jauntywunderkind/event-target-shim
An implementation of WHATWG EventTarget interface.
@miot-plugin/event-target-shim
An implementation of WHATWG EventTarget interface.
An implementation of WHATWG EventTarget interface, plus few extensions.
npm install event-target-shim
Typescript
Module System
Min. Node Version
Node Version
NPM Version
99.1
Supply Chain
94
Quality
76.2
Maintenance
100
Vulnerability
100
License
TypeScript (98.68%)
JavaScript (1.32%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
127 Stars
127 Commits
27 Forks
4 Watchers
16 Branches
6 Contributors
Updated on May 23, 2025
Latest Version
6.0.2
Package Id
event-target-shim@6.0.2
Size
74.55 kB
NPM Version
6.14.8
Node Version
15.2.0
Published on
Jan 07, 2021
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
45
An implementation of WHATWG EventTarget interface, plus few extensions.
EventTarget
constructor that can inherit for your custom object.obj.onclick
).1import {EventTarget, defineEventAttribute} from "event-target-shim" 2 3class Foo extends EventTarget { 4 // ... 5} 6 7// Define `foo.onhello` property. 8defineEventAttribute(Foo.prototype, "hello") 9 10// Use 11const foo = new Foo() 12foo.addEventListener("hello", e => console.log("hello", e)) 13foo.onhello = e => console.log("onhello:", e) 14foo.dispatchEvent(new CustomEvent("hello"))
Use npm to install then use a bundler.
npm install event-target-shim
Or download from dist
directory.
1import {EventTarget, defineEventAttribute} from "event-target-shim" 2// or 3const {EventTarget, defineEventAttribute} = require("event-target-shim") 4 5// or UMD version defines a global variable: 6const {EventTarget, defineEventAttribute} = window.EventTargetShim
Register an event listener.
type
is a string. This is the event name to register.callback
is a function. This is the event listener to register.options
is a boolean or an object { capture?: boolean, passive?: boolean, once?: boolean }
. If this is a boolean, it's same meaning as { capture: options }
.
capture
is the flag to register the event listener for capture phase.passive
is the flag to ignore event.preventDefault()
method in the event listener.once
is the flag to remove the event listener automatically after the first call.Unregister an event listener.
type
is a string. This is the event name to unregister.callback
is a function. This is the event listener to unregister.options
is a boolean or an object { capture?: boolean }
. If this is a boolean, it's same meaning as { capture: options }
.
capture
is the flag to register the event listener for capture phase.Dispatch an event.
event
is a Event object or an object { type: string, [key: string]: any }
. The latter is non-standard but useful. In both cases, listeners receive the event as implementing Event interface.Define an event attribute (e.g. onclick
) to proto
. This is non-standard.
proto
is an object (assuming it's a prototype object). This function defines a getter/setter pair for the event attribute.type
is a string. This is the event name to define.For example:
1class AbortSignal extends EventTarget { 2 constructor() { 3 this.aborted = false 4 } 5} 6// Define `onabort` property. 7defineEventAttribute(AbortSignal.prototype, "abort")
Define a custom EventTarget
class with event attributes. This is non-standard.
types
is a string or an array of strings. This is the event name to define.For example:
1// This has `onabort` property. 2class AbortSignal extends EventTarget("abort") { 3 constructor() { 4 this.aborted = false 5 } 6}
1const {EventTarget, defineEventAttribute} = EventTargetShim 2 3// Define a derived class. 4class Foo extends EventTarget { 5 // ... 6} 7 8// Define `foo.onhello` property. 9defineEventAttribute(Foo.prototype, "hello") 10 11// Register event listeners. 12const foo = new Foo() 13foo.addEventListener("hello", (e) => { 14 console.log("hello", e) 15}) 16foo.onhello = (e) => { 17 console.log("onhello", e) 18} 19 20// Dispatching events 21foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
1import { EventTarget, defineEventAttribute } from "event-target-shim"; 2 3// Define events 4type FooEvents = { 5 hello: CustomEvent 6} 7type FooEventAttributes = { 8 onhello: CustomEvent 9} 10 11// Define a derived class. 12class Foo extends EventTarget<FooEvents, FooEventAttributes> { 13 // ... 14} 15// Define `foo.onhello` property's implementation. 16defineEventAttribute(Foo.prototype, "hello") 17 18// Register event listeners. 19const foo = new Foo() 20foo.addEventListener("hello", (e) => { 21 console.log("hello", e.detail) 22}) 23foo.onhello = (e) => { 24 console.log("onhello", e.detail) 25} 26 27// Dispatching events 28foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
Unfortunately, both FooEvents
and FooEventAttributes
are needed because TypeScript doesn't allow the mutation of string literal types. If TypeScript allowed us to compute "onhello"
from "hello"
in types, FooEventAttributes
will be optional.
This EventTarget
type is compatible with EventTarget
interface of lib.dom.d.ts
.
By default, methods such as addEventListener
accept unknown events. You can disallow unknown events by the third type parameter "strict"
.
1type FooEvents = { 2 hello: CustomEvent 3} 4class Foo extends EventTarget<FooEvents, {}, "strict"> { 5 // ... 6} 7 8// OK because `hello` is defined in FooEvents. 9foo.addEventListener("hello", (e) => { 10}) 11// Error because `unknown` is not defined in FooEvents. 12foo.addEventListener("unknown", (e) => { 13})
However, if you use "strict"
parameter, it loses compatibility with EventTarget
interface of lib.dom.d.ts
.
dispatchEvent()
methodTypeScript cannot infer the event type of dispatchEvent()
method properly from the argument in most cases. You can improve this behavior with the following steps:
"strict"
. This prevents inferring to dispatchEvent<string>()
.type
property of event definitions stricter.1type FooEvents = { 2 hello: CustomEvent & { type: "hello" } 3 hey: Event & { type: "hey" } 4} 5class Foo extends EventTarget<FooEvents, {}, "strict"> { 6 // ... 7} 8 9// Error because `detail` property is lacking. 10foo.dispatchEvent({ type: "hello" })
1// Define a derived class.
2function Foo() {
3 EventTarget.call(this)
4}
5Foo.prototype = Object.create(EventTarget.prototype, {
6 constructor: { value: Foo, configurable: true, writable: true }
7 // ...
8})
9
10// Define `foo.onhello` property.
11defineEventAttribute(Foo.prototype, "hello")
12
13// Register event listeners.
14var foo = new Foo()
15foo.addEventListener("hello", function(e) {
16 console.log("hello", e)
17})
18foo.onhello = function(e) {
19 console.log("onhello", e)
20}
21
22// Dispatching events
23function isSupportEventConstrucor() { // IE does not support.
24 try {
25 new CusomEvent("hello")
26 return true
27 } catch (_err) {
28 return false
29 }
30}
31if (isSupportEventConstrucor()) {
32 foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
33} else {
34 var e = document.createEvent("CustomEvent")
35 e.initCustomEvent("hello", false, false, "detail")
36 foo.dispatchEvent(e)
37}
Contributing is welcome ❤️
Please use GitHub issues/PRs.
npm install
installs dependencies for development.npm test
runs tests and measures code coverage.npm run clean
removes temporary files of tests.npm run coverage
opens code coverage of the previous test with your default browser.npm run lint
runs ESLint.npm run build
generates dist
codes.npm run watch
runs tests on each file change.No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
Reason
Found 2/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
35 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More