JSFiddle - React, Tailwind, and code Playground

by webinista

HTML

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Custom DOM Events Example</title>
    </head>
    <body>
        
        <h1>Custom DOM Events Example</h1>
        
        <button>Click me :-)</button>
        <div id="result"></div>
        
    </body>
</html>

CSS

body{
    font: 90% / 1.5 sans-serif;
}
h1{font-size:2em; font-weight:bold;}
button{
    background:#606;
    color:#fff;
    border:2px outset #606;
    font: inherit;
}
button:hover{
    background:#909;
    color:#fff;
    border:2px outset #909;
    font: inherit;
}
#result{
    background:#eee; 
    margin:1em auto;
    padding: .5em;   
}

JavaScript

/*
Add an event handler of some sort to an object so that
we have a means of triggering the event.
*/

document.querySelector('button').onclick = function(e) {

    // Create an event of the type CustomEvent
    var evt = document.createEvent('CustomEvent');

/*
    Parameters for initCustomEvent:
    initCustomEvent( eventType, canItBubble, isItCancelable, detailAboutEvent);

    Internet Explorer 9+ requires the fourth parameter, but can be null
    (as shown below). Without it, IE will throw an error.

    Versions of Internet Explorer < 9 do not support DOM Level 3
    */
    evt.initCustomEvent('bounce', false, false, null);

    // Dispatch the event on an object, in this case the document
    document.dispatchEvent(evt);
};

/*
Add an event listener to the object on which you've
dispatched an event.
*/
document.addEventListener('bounce', function(e) {
    // Do something when the event is fired.
    document.querySelector('#result').innerHTML += 'A bounce event was fired!<br>';
}, false);