JSFiddle - React, Tailwind, and code Playground

HTML

<form id="f">
    <input type="text" id="test2" />
    <select id="test3">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <textarea id="test4"></textarea>
    <input name="radiogroup" type="radio">aa</input>
    <input name="radiogroup" type="radio">bb</input>
    <input type="file"></input>
</form>
<div id="log"></div>

JavaScript

function LOG(s) {
  document.getElementById("log").innerHTML += "<br>" + s;
}
function logEvent(e) {
    LOG("handled " + e.type + " event @ &lt;" + e.target.tagName + " type='" + e.target.type + "'>" + e.currentTarget)
}

var elts = document.querySelectorAll("input, select, textarea");
for (var i = 0; i<elts.length; i++) {
    elts[i].addEventListener("change", logEvent, false);
    elts[i].addEventListener("change", logEvent, true);
    elts[i].addEventListener("input", logEvent, false);
    elts[i].addEventListener("input", logEvent, true);
}
LOG("added listener for " + elts.length + " elements");