github上關於mootools一個issue的討論很有意思，所以就想測試記錄下。感興趣的可以點擊原頁面看看。
這個問題來自IE(LTE8)中對checkbox和radio change事件的實現問題，在IE(LTE8)中測試下來，當你點擊一個checkbox或者radio，它的change事件是不會立即觸發，除非你讓它失去焦點，而在其他標准瀏覽器中(包括IE9)，是點擊后立即觸發change事件的，這的確是個蛋疼的問題，說到解決方法，倒也比較容易，用IE(LTE8)中元素特有的propertychange事件來處理(IE9已經沒這玩意兒了)，就能避免上述問題，如：
|
1
2
3
|
checkEl.attachEvent(
'onpropertychange'
,
function
() {
console.log(
'hey man, I am changed'
);
});
|
但是這樣就認為解決了，是不充分的，因為像checkEl.setAttribute('data-value', 'god')這樣的操作也會觸發其propertychange事件，所以我們需要用其event.propertyName來判斷下，如：
|
1
2
3
4
|
checkEl.attachEvent(
'onpropertychange'
,
function
() {
if
(window.event.propertyName ==
'checked'
)
console.log(
'blah blah blah...'
);
});
|
這樣算是可以了。由此展開我又測試了下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來監聽一下, 這里有篇文章(原文鏈接)對此問題進行了闡述，感興趣的也可以讀讀。