dom-event-emit

A type-safe, flexible DOM event emitter for browser environments. It has the same event API as DOM elements.

适用于浏览器环境的 DOM 事件触发器，拥有和DOM元素相同的事件API。

Installation

npm

npm install dom-event-emit

browser

https://cdn.jsdelivr.net/npm/dom-event-emit/dist/index.min.js

Quick Start

import DomEmitter from 'dom-event-emit'

// Define your event types
interface MyEvents {
	'user:login': { userId: string; timestamp: number }
	'user:logout': void
}

// Create an instance
const events = new DomEmitter<MyEvents>()

// Add event listener
events.on('user:login', (event) => {
	console.log(`User logged in: ${event.detail.userId}`)
})

// Emit event
events.emit('user:login', { userId: '123', timestamp: Date.now() })

API

Constructor

constructor(target?: HTMLElement)

Creates a new DomEmitter instance.

• target (optional): HTMLElement to attach events to. If not provided, creates a virtual element.

Methods

addEventListener / on

addEventListener<K extends keyof T>(
  type: K,
  listener: EventListener,
  options?: boolean | AddEventListenerOptions
): this

Adds an event listener.

• type: Event type
• listener: Event handler function
• options: DOM event options (optional)

removeEventListener / off

removeEventListener<K extends keyof T>(
	type: K,
	listener: CustomEventListener,
	options?: boolean | EventListenerOptions
): this

Removes an event listener.

once

once<K extends keyof T>(
	type: K,
	listener: CustomEventListener,
	options?: boolean | EventListenerOptions
): this

Adds a one-time event listener.

dispatchEvent

dispatchEvent<K extends keyof T>(event: Event, data?: Partial<T[K]>): boolean

Dispatches a raw DOM event.

emit

emit<K extends keyof T>(
	type: K,
	detail?: any,
	data?: Partial<T[K]>
): boolean

• type: Event type
• detail: Event detail data
• data: Additional event data (optional)

Emits an event with optional data.

🚨 It also trigger events bind by assigning on + type to the instance.

has

has(type: string, includeOn = false): boolean

Checks if an event type has any listeners.

size

size(type: string, includeOn = false): number

Gets the number of listeners for an event type.

clear

clear(type?: string): void

Clears all listeners for a specific event type or all events.

destroy

destroy(): void

Destroys the instance and removes all listeners.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.