JSFiddle - React, Tailwind, and code Playground

by dsbonev

JavaScript

(function dispatchCustomEvent(window) {
    var document = window.document
        console = window.console,
        event = null,
        eventInterface = 'CustomEvent',
        eventPrefix = 'alarm:',
        eventTypes = {
            'wakeUp': 'You are late for work',
            'match': 'The match for the title starts'
        },
        bubbles = true,
        cancelable = false,
        alarmButton = (function alarmButtonInit() {
            var that = document.createElement('button'),
                text = document.createTextNode('Fire Alarm Event');
            
            var eventTypeSize = Object.keys(eventTypes).length;
            that.addEventListener('click', function fireEvent() {
                event = document.createEvent(eventInterface);
                event.initCustomEvent(eventPrefix + 'wakeUp', bubbles, cancelable, eventTypes['wakeUp']);
                this.dispatchEvent(event);
            }, false);
                
            that.appendChild(text);
            document.body.appendChild(that);
            return that;
        }());
    
    Object.keys(eventTypes).forEach(function (item, index, collection) {
        document.addEventListener(eventPrefix + item, function (event){
            console.log(event.type, event.detail);
        }, false);
    });
    
}(window));