JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<input type='checkbox' checked='checked' id='chkOn'/><label for='chkOn'>Checkbox 1</label><br/>
<input type='checkbox' id='chkOff'/><label for='chkOff'>Checkbox 2</label><br/>
<select>
<option>Default …</option>
<option>Val 1</option>
<option>Val 2</option>
<option>Val 3</option>
</select>
</div>
JavaScript
(function(w)
{
var i;
if (w.addEventListener)
{
w.addEventListener('load',setDelegation ,false);
}
else
{
w.attachEvent('onload',setDelegation );
}
function setDelegation (e)
{
var i = document.getElementById('content');
if (!i.addEventListener)
{
i.attachEvent('onfocusin',(function(self)
{
return function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
switch (target.tagName.toLowerCase())
{
case 'input':
if (target.getAttribute('type') !== 'checkbox')
{
return true;
}
// target.checked = !target.checked;
return changeDelegator.apply(self,[e]);//(as is
case 'select':
self.attachEvent('onfocusout',(function(self,current)
{
return function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target !== current)
{
return;
}
self.detachEvent('onfocusout',arguments.callee);//(remove closure
return changeDelegator.apply(self,[e]);
}
})(self,target));
default: return;
}
}
})(i));//(fake change event, buggy
this.detachEvent('onload',setDelegation);//avoid mem leaks...