JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
  <input type="text" disabled/>
  <input type="radio" disabled/>
  <input type="checkbox" disabled/>
  <input type="button" disabled value="Button"/>
  <input type="date" disabled/>
  <input type="time" disabled/>
  <input type="email" disabled/>
  <input type="file" disabled/>
  <input type="color" disabled/>
  <input type="range" disabled/>
  <select disabled>
    <option value="1" selected>bla</option>
  </select>
  <button disabled>Button</button>
  <textarea disabled></textarea>
</div>

CSS

#test {
  margin: 0;
  padding: 0;
  background: yellow;
}

input, select, button, textarea {
  margin: 0;
}

JavaScript

function log(evt) {
  console.log(evt.target, evt.type, evt);
}

var events = ["pointerenter", "pointerover", "pointermove",
    "pointerout", "pointerleave", "mouseenter", "mouseover",
    "mousemove", "mouseout", "mouseleave", "mousedown",
    "mouseup", "click", "dblclick", "contextmenu"];
var div = document.getElementById("test");
for (var i = 0; i < events.length; i++) {
  div.addEventListener(events[i], log);
}

var inputs = document.querySelectorAll("input,select,button,textarea");
for (var i = 0; i < inputs.length; i++) {
  for (var j = 0; j < events.length; j++) {
    inputs[i].addEventListener(events[j], log);
  }
}