How do you implement a custom event system in JavaScript that allows for event registration, deregistration, and event propagation? — JavaScript Interview Question #75

In JavaScript, events are a way for developers to create reactive applications. While there are built-in events in JavaScript, sometimes it’s necessary to create custom events to handle specific application needs. A custom event system can be implemented using the following steps:

Create a central event hub or event dispatcher that keeps track of all registered events and their associated handlers. This event hub can be an object that stores the event names as keys and an array of callback functions as values.

    const eventHub = {
        events: {},
        registerEvent(eventName, callback) {
            if (!this.events[eventName]) {
                this.events[eventName] = [];
            }
            this.events[eventName].push(callback);
        },
        unregisterEvent(eventName, callback) {
            if (this.events[eventName]) {
                const index = this.events[eventName].indexOf(callback);
                if (index !== -1) {
                    this.events[eventName].splice(index, 1);
                }
            }
        },
        triggerEvent(eventName, data) {
            if (this.events[eventName]) {
                this.events[eventName].forEach(callback => {
                    callback(data);
                });
            }
        }
    };

In the above code, the eventHub object is created with three methods - registerEvent, unregisterEvent, and triggerEvent - that allow for event registration, deregistration, and event dispatching respectively. The registerEvent method checks if an event with the given name exists, and if not, it creates an empty array to hold callback functions for that event. The unregisterEvent method removes a specific callback function from the array of callbacks for the given event name. Finally, the triggerEvent method looks up the array of callback functions for the given event name and invokes each callback function with the data passed to it.

    function handleEvent(data) {
        console.log("Event triggered with data: ", data);
    }
    
    eventHub.registerEvent("myEvent", handleEvent);

In the above code, the handleEvent function is registered as a callback function for the event named myEvent.

Trigger events by calling the triggerEvent method on the event hub object and passing the name of the event and any data that needs to be passed to the event listeners.

    eventHub.triggerEvent("myEvent", { key: "value" });

In the above code, the triggerEvent method is called with the name myEvent and a data object containing a key-value pair.

Deregister event listeners by calling the unregisterEvent method on the event hub object and passing the name of the event and the function to be removed.

    eventHub.unregisterEvent("myEvent", handleEvent);

In the above code, the handleEvent function is removed as a callback function for the event named myEvent.

Using a custom event system in JavaScript can help to decouple different parts of an application and make it more modular. By providing a centralized location for handling events, the code becomes more maintainable and easier to debug. Additionally, custom events can be used to implement complex application logic and provide more granular control over the flow of the application.