JSFiddle - React, Tailwind, and code Playground

by jitter

HTML

<div id="container">
    <input id="text" type="text" value="10" size="5" />
</div>

CSS

#container {
    border:solid 1px black;
    background-color:gray;
    width:250px;
    height:200px;
}

JavaScript

var cont = document.getElementById("container"),
    txt = document.getElementById("text");

function log(str, t, e) {
    //console.log( str, t.id, e.target.id, e.type );
    console.log(str, e.relatedTarget, e.relatedTarget.parentNode);
}

function handle1(e) {
    log("handle1", this, e);
    this.style.backgroundColor = e.type == "mouseover" ? "blue" : "gray";
}

function handle2(e) {
    log("handle2", this, e);
}

cont.addEventListener("mouseover", handle1, false);
cont.addEventListener("mouseout", handle1, false);


txt.addEventListener("mouseover", handle2, false);
txt.addEventListener("mouseout", handle2, false);