JSFiddle - React, Tailwind, and code Playground

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

document.querySelector('button').onclick = function(e) {
    var event = document.createEvent('CustomEvent');
    event.initCustomEvent('bounce', true, true, null);
    event.data = 'hallo';
    document.dispatchEvent(event);
};

document.addEventListener('bounce', function() {
    alert('hallo');
}, false);