JSFiddle - React, Tailwind, and code Playground

by spikesagal

HTML

<body></body>

JavaScript

/**
 * Implementation
 */
 
function MakeEventTarget(obj) {
    var listeners = {};

    function addEventListener(type, callback) {
        listeners[type] = listeners[type] || [];
        listeners[type].push(callback);
    };

    function removeEventListener(type, callback) {
        var queue = listeners[type];
        if (queue && queue.length) {
            // Remove specified callback(s) from the subscriber queue.
            // If no callback specified, remove all subscribers of that event type.
            if (!callback) {
                listeners[type] = null;
            } else {
                listeners[type] = queue = queue.filter(function removeCallback(listener) {
                    return listener !== callback;
                });
            }
        }
        return queue;
    };

    function dispatchEvent(event) {
        var queue = listeners[event.type];
        event.target = this;
        queue && queue.forEach(function trigger(callback) {
            callback.call(event.target, event);
        });
    };

    Object.defineProperties(obj, {
        addEventListener: {
            value: addEventListener
        },
        removeEventListener: {
            value: removeEventListener
        },
        dispatchEvent: {
            value: dispatchEvent
        }
    });

    return obj;
}


/**
 * Testing
 */

// Create a plain object
var obj = {
    justAnObject: true,
    isDomObject: false
}

// Make it an EventTarget
MakeEventTarget(obj);

// Event callbacks
function foo(event) {
    document.body.innerText += 'foo dets: ' + event.detail;
    document.body.innerHTML += '<br/>';
}
function bar(event) {
    document.body.innerText += 'bar dets: ' + event.detail;
    document.body.innerHTML += '<br/>';

}
function nope(event) {
    document.body.innerText += 'nope dets: ' + event.detail;
    document.body.innerHTML += '<br/>';
}

// Add one listener to foo event and two listeners to bar event
obj.addEventListener('bar',...