JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIV">
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
</div>

CSS

#div1{background-color:blue;color:white;}
#div2{background-color:orange;}
#DIV{background-color:red;height:100px;}
.click{background-color:green;}

JavaScript

var events = {
    "div1" : function(){
        alert('CONTENT: '+this.innerHTML);
    },
    "div2" : function(){
        this.innerHTML+='<span class="click">cliqué</span>';
    }
};
function $(id){
    return document.getElementById(id);
}
$('DIV').onmouseover = function(evt){
    evt = evt || event;
    var action, target = evt.target || evt.srcElement;
    while(target!=this){
        if(action = events[target.getAttribute('id')]){
            action.call(target,evt);
            // limiter à la première action rencontrée
            // return; 
        }
        target = target.parentNode;
    }
    // action sur le DIV principal 
    // target.style.....
};