Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
event-target-shim
Advanced tools
Package description
The event-target-shim npm package provides a cross-platform, shim implementation of the EventTarget interface, allowing developers to use a consistent API for event handling across different environments. It supports the standard addEventListener, removeEventListener, and dispatchEvent methods, along with custom event types. This makes it useful for projects that need to handle events in both browser and non-browser environments, such as Node.js applications or web components.
Basic Event Handling
This demonstrates how to create an instance of EventTarget, add an event listener for a custom event type, and then dispatch an event of that type. It's the basic usage for handling custom events.
const EventTargetShim = require('event-target-shim');
const myEventTarget = new EventTargetShim();
myEventTarget.addEventListener('customEvent', function(event) {
console.log(`Received: ${event.type}`);
});
myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));
Using Options for addEventListener
This example shows how to use the `once` option with `addEventListener` to automatically remove the event listener after it has been invoked once, demonstrating the package's support for event listener options.
const EventTargetShim = require('event-target-shim');
const myEventTarget = new EventTargetShim();
myEventTarget.addEventListener('customEvent', function(event) {
console.log(`Received: ${event.type}`);
}, { once: true });
myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));
myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));
EventEmitter3 is a high-performance event emitter. While event-target-shim mimics the EventTarget interface specifically, EventEmitter3 provides a more general-purpose event handling mechanism. It doesn't follow the browser's EventTarget API as closely but offers a lightweight, fast solution for event management.
Wolfy87's EventEmitter is another alternative for event handling, offering a similar set of functionalities to event-target-shim but with a different API. It provides a more object-oriented approach to event handling, with features like namespaced events, which can be particularly useful in complex applications. Compared to event-target-shim, it might offer more flexibility in certain scenarios but doesn't aim to replicate the EventTarget interface directly.
Readme
An implementation of WHATWG EventTarget interface, plus few extensions.
EventTarget
constructor that can inherit for your custom object.obj.onclick
).import {EventTarget, defineEventAttribute} from "event-target-shim"
class Foo extends EventTarget {
// ...
}
// Define `foo.onhello` property.
defineEventAttribute(Foo.prototype, "hello")
// Use
const foo = new Foo()
foo.addEventListener("hello", e => console.log("hello", e))
foo.onhello = e => console.log("onhello:", e)
foo.dispatchEvent(new CustomEvent("hello"))
Use npm to install then use a bundler.
npm install event-target-shim
Or download from dist
directory.
import {EventTarget, defineEventAttribute} from "event-target-shim"
// or
const {EventTarget, defineEventAttribute} = require("event-target-shim")
// or UMD version defines a global variable:
const {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:
class AbortSignal extends EventTarget {
constructor() {
this.aborted = false
}
}
// Define `onabort` property.
defineEventAttribute(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:
// This has `onabort` property.
class AbortSignal extends EventTarget("abort") {
constructor() {
this.aborted = false
}
}
const {EventTarget, defineEventAttribute} = EventTargetShim
// Define a derived class.
class Foo extends EventTarget {
// ...
}
// Define `foo.onhello` property.
defineEventAttribute(Foo.prototype, "hello")
// Register event listeners.
const foo = new Foo()
foo.addEventListener("hello", (e) => {
console.log("hello", e)
})
foo.onhello = (e) => {
console.log("onhello", e)
}
// Dispatching events
foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
Currently typescript does not support type mutation by method, therefore the previous example will not work without the following modifications:
import { EventTarget, defineEventAttribute } from "event-target-shim";
// Define a derived class.
class Foo extends EventTarget<"onhello"> {
// ...
}
// Define `foo.onhello` property.
defineEventAttribute(Foo.prototype, "hello")
// Register event listeners.
const foo = new Foo()
foo.addEventListener("hello", (e) => {
console.log("hello", e)
})
foo.onhello = (e) => {
console.log("onhello", e)
}
// Dispatching events
foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
In the future, if typescript adds support to string literal mutation (joining, slicing and etc.), it should be possible to automatically infer onhello
type from hello
. However, until then you are stuck with this:
import { EventTarget, defineEventAttribute } from "event-target-shim";
// Define a derived class.
class Foo extends EventTarget<"onhello">("hello") {
// ...
}
// Register event listeners.
const foo = new Foo()
foo.addEventListener("hello", (e) => {
console.log("hello", e)
})
foo.onhello = (e) => {
console.log("onhello", e)
}
// Dispatching events
foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
// Define a derived class.
function Foo() {
EventTarget.call(this)
}
Foo.prototype = Object.create(EventTarget.prototype, {
constructor: { value: Foo, configurable: true, writable: true }
// ...
})
// Define `foo.onhello` property.
defineEventAttribute(Foo.prototype, "hello")
// Register event listeners.
var foo = new Foo()
foo.addEventListener("hello", function(e) {
console.log("hello", e)
})
foo.onhello = function(e) {
console.log("onhello", e)
}
// Dispatching events
function isSupportEventConstrucor() { // IE does not support.
try {
new CusomEvent("hello")
return true
} catch (_err) {
return false
}
}
if (isSupportEventConstrucor()) {
foo.dispatchEvent(new CustomEvent("hello", { detail: "detail" }))
} else {
var e = document.createEvent("CustomEvent")
e.initCustomEvent("hello", false, false, "detail")
foo.dispatchEvent(e)
}
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.FAQs
An implementation of WHATWG EventTarget interface.
The npm package event-target-shim receives a total of 13,034,186 weekly downloads. As such, event-target-shim popularity was classified as popular.
We found that event-target-shim demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.