UNPKG

hd-utils

Version:

A handy utils for modern JS developers

49 lines (39 loc) 2.48 kB
import { EventCallback } from '../utils/types'; import { Nullable } from '../utils/utilityTypes'; /** * @important --Browser Only-- * @description DOMEventBus class implementation tailored for the Document Object Model (DOM). It serves as a centralized event manager, allowing components to subscribe to and publish custom events within a web application. With methods like subscribe, unsubscribe, and publish, it enables a modular and efficient communication system, enhancing the decoupling of components. This class leverages standard DOM event handling mechanisms, such as addEventListener and dispatchEvent, to facilitate seamless interaction and information exchange between different parts of a web application. * @example * // Create an instance of the DOM event bus with a specific element as the eventBusContainer const specificElement = document.getElementById('myElement'); const specificElementEventBus = new DOMEventBus(specificElement); // Subscribe to an event on the specific element function handleSpecificElementEvent(event: CustomEvent) { console.log('Specific Element Event handled with data:', event.detail); } specificElementEventBus.subscribe('SpecificElementEvent', handleSpecificElementEvent); // Publish an event on the specific element specificElementEventBus.publish('SpecificElementEvent', { message: 'Hello, Specific Element Event!' }); // Unsubscribe from an event on the specific element specificElementEventBus.unsubscribe('SpecificElementEvent', handleSpecificElementEvent); // Create an instance of the DOM event bus with a DocumentFragment as the eventBusContainer const defaultEventBus = new DOMEventBus(); // Subscribe to an event on the default event bus function handleDefaultEvent(event: CustomEvent) { console.log('Default Event handled with data:', event.detail); } defaultEventBus.subscribe('DefaultEvent', handleDefaultEvent); // Publish an event on the default event bus defaultEventBus.publish('DefaultEvent', { message: 'Hello, Default Event!' }); // Unsubscribe from an event on the default event bus defaultEventBus.unsubscribe('DefaultEvent', handleDefaultEvent); */ export default class DOMEventBus { private eventBusContainer; private document; constructor(eventBusContainer?: Nullable<DocumentFragment | HTMLElement>); subscribe(event: string, callback: EventCallback): void; unsubscribe(event: string, callback: EventCallback): void; publish(event: string, data?: any): void; }