js change,propertychange,input事件小議

2019-11-20 23:32:04

字體：大中小

來源：轉載

供稿：網(wǎng)友

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

這個問題來自IE(LTE8)中對checkbox和radio change事件的實現(xiàn)問題，在IE(LTE8)中測試下來，當你點擊一個checkbox或者radio，它的change事件是不會立即觸發(fā)，除非你讓它失去焦點，而在其他標準瀏覽器中(包括IE9)，是點擊后立即觸發(fā)change事件的，這的確是個蛋疼的問題，說到解決方法，倒也比較容易，用IE(LTE8)中元素特有的propertychange事件來處理(IE9已經(jīng)沒這玩意兒了)，就能避免上述問題，如：

復制代碼代碼如下:

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

但是這樣就認為解決了，是不充分的，因為像checkEl.setAttribute('data-value', 'god')這樣的操作也會觸發(fā)其propertychange事件，所以我們需要用其event.propertyName來判斷下，如：

復制代碼代碼如下:

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

這樣算是可以了。由此展開我又測試了下select，其change事件的表現(xiàn)在不同瀏覽器中一致，沒有出現(xiàn)非要先失去焦點的情況。我又測試了下input[type="text"]，它的change事件是我們所熟悉的，要失去焦點才會觸發(fā)，那么當我們想讓它一輸入東西就立即觸發(fā)呢，參考之前的例子在IE(LTE8)中，我們可以用propertychange來實現(xiàn)，只不過propertyName的條件變成‘value'而已。在其他標準瀏覽器中(包括IE9)，我們可以用HTML5中的一個標準事件input, 如：

復制代碼代碼如下:

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

這樣我們的每一次輸入都會觸發(fā)此事件，有人會說為什么不用keyup來監(jiān)聽一下, 這里有篇文章(原文鏈接)對此問題進行了闡述，感興趣的也可以讀讀。

上一篇：suggestion開發(fā)小結以及對鍵盤事件的總結（針對中文輸入法狀態(tài)）

下一篇：JavaScript面向對象設計二構造函數(shù)模式

學習交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

js change,propertychange,input事件小議