Skip to main content

Built and signed on GitHub Actions

Strictly typed EventTarget that directly extends EventTarget to function as a drop-in replacement. It works with all Event-Types and accounts for basically no additional bundle-size.

This package works with Bun, Cloudflare Workers, Node.js, Deno, Browsers
JSR Score
100%
Published
2 months ago (1.1.1)
class TypedEventTarget
extends EventTarget

Type Parameters

M extends ValueIsEvent<M>

Methods

dispatchTypedEvent<T extends keyof M>(_type: T, event: M[T]): boolean

Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

interface TypedEventTarget

Typescript friendly version of EventTarget

Examples

Example 1

interface MyEventMap {
    hello: Event;
    time: CustomEvent<number>;
}

const eventTarget = new TypedEventTarget<MyEventMap>();

eventTarget.addEventListener('time', (event) => {
    // event is of type CustomEvent<number>
});

Type Parameters

M extends ValueIsEvent<M>

A map of event types to their respective event classes.

Properties

addEventListener: <T extends keyof M & string>(type: T, listener: TypedEventListenerOrEventListenerObject<M, T> | null, options?: boolean | AddEventListenerOptions) => void

Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in ยง 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

removeEventListener: <T extends keyof M & string>(type: T, callback: TypedEventListenerOrEventListenerObject<M, T> | null, options?: EventListenerOptions | boolean) => void

Removes the event listener in target's event listener list with the same type, callback, and options.

deprecated
dispatchEvent: (event: Event) => boolean

Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

Add Package

deno add @derzade/typescript-event-target

Import symbol

import { TypedEventTarget } from "@derzade/typescript-event-target";

Add Package

npx jsr add @derzade/typescript-event-target

Import symbol

import { TypedEventTarget } from "@derzade/typescript-event-target";

Add Package

yarn dlx jsr add @derzade/typescript-event-target

Import symbol

import { TypedEventTarget } from "@derzade/typescript-event-target";

Add Package

pnpm dlx jsr add @derzade/typescript-event-target

Import symbol

import { TypedEventTarget } from "@derzade/typescript-event-target";

Add Package

bunx jsr add @derzade/typescript-event-target

Import symbol

import { TypedEventTarget } from "@derzade/typescript-event-target";