IE8及以下浏览器中checkbox/radio change事件与input事件处理

https://github.com/mootools/mootools-core/issues/2170

IE8中checkbox/radio change事件兼容处理

该问题源于IE8及以下版本（IE(LTE8)）对checkbox和radio元素change事件的实现差异。测试表明，在这些旧版IE中，点击checkbox或radio后change事件不会立即触发，必须等到元素失去焦点时才会执行；而在其他标准浏览器（包括IE9）中，点击后会立即触发change事件。这是一个令人头疼的兼容性问题。解决思路相对直接，可以利用IE(LTE8)中元素特有的propertychange事件来处理，从而规避上述延迟问题（注：IE9已移除该事件），例如：

 
checkEl.attachEvent('onpropertychange', function() {
console.log('hey man, I am changed');
}); 

然而，仅这样做并不充分。因为诸如checkEl.setAttribute('data-value', 'god')这类属性修改操作也会触发propertychange事件。因此，我们需要通过event.propertyName进行判断，示例如下：

 
checkEl.attachEvent('onpropertychange', function() {
if(window.event.propertyName == 'checked')
console.log('blah blah blah...');
}); 

文本框实时输入监听：propertychange与input事件

至此问题基本解决。由此延伸，我测试了select元素，其在不同浏览器中的change事件表现一致，均无需失焦即可触发。接着测试input[type="text"]，其change事件行为符合常规认知，即需失去焦点才触发。若希望文本框在每次输入时立即触发事件，参考前述思路，在IE(LTE8)中可继续使用propertychange事件，只需将propertyName的判断条件改为'value'即可。而在其他标准浏览器（包括IE9）中，推荐使用HTML5标准事件input，例如：

 
inputEl.addEventListener('input', function(event) {
console.log('input event fired');
}, false);

这样即可实现每次输入都触发该事件。有人可能会问为何不使用keyup来监听，这里有一篇文章（原文链接）对此进行了详细阐述，感兴趣者可阅读参考。