JSFiddle - React, Tailwind, and code Playground

HTML

<div>Alert will be shown when clicking on a blue span:
    <span id="sdf">Element1</span>
    <span>Element2</span>
    <span><strong>Element3</strong></span>
    <span>Element4</span>
    <span>Element5</span>
    <div>That's a div - should not trigger here</div>
    <div><span>Nested span - should trigger</span></div>
</div>

CSS

div{
    padding:10px;
    border:1px solid red;
}
span{
    padding:5px;
    border:1px solid blue;
    display:inline-block;
}
div div{
       padding:2px;
    border:1px dotted green;
    display:inline-block; 
}

JavaScript

HTMLElement.prototype.on = function (type, selector, func) {
    var attach = window.addEventListener ? "addEventListener":"attachEvent",
      elements = this.querySelectorAll(selector);
    this[attach](type, function (e) {
        var target = e && e.target || window.event.srcElement,
           success = false;
        while(target != this){
            console.log("searching"+ target);
            if (contained()){
                success = true;
                break;
            }
            target = target.parentNode;
        }
        if(success){func()}
        // helpermethod
        function contained(){ for (var i=elements.length;i--;){ if(elements[i] == target) return true; } }
    });
};

document.querySelector("div").on("click", "span", function() {
    console.log("gotcha!");
});