JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="box">gfdgsfdg</div>
<div id="test2" class="box">gfdsgfdsg</div>
<div id="test3" class="box">fdsgfdsgg</div>
<ul id="test4" class="box">
    <li id="test5" class="box">fsgfdsg</li>
    <li id="test6" class="box">gfdsgfds</li>
    <li id="test7" class="box">gfdsgfds</li>
    <li id="test8" class="box">gfdsgfds</li>
</ul>

JavaScript

var body = document.body;

if (body.addEventListener) {
    body.addEventListener('click', function (e) {
        delegate(e, "click");
    }, false);
} else {
    body.attachEvent('onclick', function () {
        var e = window.event;
        delegate(e, "click");
    }, false);
}


function delegate(e) {
    var sourceNode = e.target || e.srcElement;
    var id = sourceNode.id;
    switch (id) {
        case ("test"):
            // do some func
            break;
        case ("test2"):
            // do some func
            break;
        case ("test3"):
            // do some func
            break;
        case ("test4"):
            // do some func
            break;
        default:
            // do nothing
            break;

    }
}