JSFiddle - React, Tailwind, and code Playground
HTML
<input id="a" class="txt" type="text" /><br />
<input id="b" class="txt" type="text" /><br />
<pre id="log"></pre>
JavaScript
// (c) Leon Sorokin
// super awesome callback
function log(e) {
document.getElementById("log").innerHTML += e.type + " " + e.target.id + "\n";
}
// mock event dispatcher
function dispatch(type, el) {
var evt = document.createEvent("Event");
evt.initEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
function events() {
// mock selector matcher, only handles .blah
function matches(el, sel) {
return el.className == sel.substr(1); // quick'n'dirty strip "." css class indicator
}
// mock selector, only handles classes
function select(sel) {
return document.getElementsByClassName(sel);
}
this.bind = function(sel, types, func) {
types = types.split(" ");
els = select(sel.substr(1)); // quick'n'dirty strip "." css class indicator
var i, j, els;
for (i in els) {
if (i == "length") break;
for (j in types) {
els[i].addEventListener(types[j], func, false);
}
}
};
this.live = function(sel, types, func) {
types = types.split(" ");
var j, els, cap;
// wrap callback with selector matcher
function matchWrap(e) {
return matches(e.target, sel) ? func.call(e.target, e) : null;
}
function bubSeq(type) {
this.handle = function(e){
matchWrap.call(e.target, e); // call normal blur/focus w/matcher
dispatch(type, e.target); // call bubbling version
}
}
for (j in types) {
var ty = types[j];
cap = /^(?:focus|blur)$/.test(ty);
if (cap) {
var bub = new bubSeq(ty == 'focus' ? 'focusin' : 'focusout');
document.addEventListener(ty, bub.handle, true);
}
else
...