js change,propertychange,input事件小議
更新時間：2011年12月20日 01:27:20 作者：
github上關于mootools一個issue的討論很有意思，所以就想測試記錄下。感興趣的可以點擊原頁面看看
https://github.com/mootools/mootools-core/issues/2170
這個問題來自IE(LTE8)中對checkbox和radio change事件的實現問題，在IE(LTE8)中測試下來，當你點擊一個checkbox或者radio，它的change事件是不會立即觸發(fā)，除非你讓它失去焦點，而在其他標準瀏覽器中(包括IE9)，是點擊后立即觸發(fā)change事件的，這的確是個蛋疼的問題，說到解決方法，倒也比較容易，用IE(LTE8)中元素特有的propertychange事件來處理(IE9已經沒這玩意兒了)，就能避免上述問題，如：
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事件的表現在不同瀏覽器中一致，沒有出現非要先失去焦點的情況。我又測試了下input[type="text"]，它的change事件是我們所熟悉的，要失去焦點才會觸發(fā)，那么當我們想讓它一輸入東西就立即觸發(fā)呢，參考之前的例子在IE(LTE8)中，我們可以用propertychange來實現，只不過propertyName的條件變成‘value'而已。在其他標準瀏覽器中(包括IE9)，我們可以用HTML5中的一個標準事件input, 如：
inputEl.addEventListener('input', function(event) {
console.log('input event fired');
}, false);
這樣我們的每一次輸入都會觸發(fā)此事件，有人會說為什么不用keyup來監(jiān)聽一下, 這里有篇文章(原文鏈接)對此問題進行了闡述，感興趣的也可以讀讀。
這個問題來自IE(LTE8)中對checkbox和radio change事件的實現問題，在IE(LTE8)中測試下來，當你點擊一個checkbox或者radio，它的change事件是不會立即觸發(fā)，除非你讓它失去焦點，而在其他標準瀏覽器中(包括IE9)，是點擊后立即觸發(fā)change事件的，這的確是個蛋疼的問題，說到解決方法，倒也比較容易，用IE(LTE8)中元素特有的propertychange事件來處理(IE9已經沒這玩意兒了)，就能避免上述問題，如：
復制代碼 代碼如下:
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事件的表現在不同瀏覽器中一致，沒有出現非要先失去焦點的情況。我又測試了下input[type="text"]，它的change事件是我們所熟悉的，要失去焦點才會觸發(fā)，那么當我們想讓它一輸入東西就立即觸發(fā)呢，參考之前的例子在IE(LTE8)中，我們可以用propertychange來實現，只不過propertyName的條件變成‘value'而已。在其他標準瀏覽器中(包括IE9)，我們可以用HTML5中的一個標準事件input, 如：
復制代碼 代碼如下:
inputEl.addEventListener('input', function(event) {
console.log('input event fired');
}, false);
這樣我們的每一次輸入都會觸發(fā)此事件，有人會說為什么不用keyup來監(jiān)聽一下, 這里有篇文章(原文鏈接)對此問題進行了闡述，感興趣的也可以讀讀。
您可能感興趣的文章:
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- js監(jiān)聽輸入框值的即時變化onpropertychange、oninput
- javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
- js propertychange和oninput事件
- 解決angularJS中input標簽的ng-change事件無效問題
- js之input[type=file]選擇重復的文件,無法觸發(fā)change事件問題
- JS中的oninput和onchange事件的區(qū)別及如何正確使用
- js實現使用輸入input和改變change事件模擬手動輸入
相關文章
js常用方法及字符串的常用判斷方法都是在工作中經常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
javascript的數組排序函數 sort方法，默認是按照ASCII 字符順序進行升序排列。2009-08-08
這篇文章主要介紹了函數window.open實現關閉所有的子窗口的相關資料，需要的朋友可以參考下。2015-08-08
這篇文章主要為大家詳細介紹了微信小程序支付前端源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
今天小編就為大家分享一篇layui動態(tài)加載多表頭的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在前端程序開發(fā)中，經常會實現js輪播圖的效果，怎么實現的呢？下面小編給大家分享基于基于JavaScript實現輪播圖代碼 ，非常不錯，感興趣的朋友可以參考下2016-07-07
這篇文章主要介紹了ES6箭頭函數和擴展,結合實例形式分析了ES6箭頭函數和擴展基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
layui問題之自動滾動二級iframe頁面到指定位置的方法
今天小編就為大家分享一篇layui問題之自動滾動二級iframe頁面到指定位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JSON遍歷方式,結合實例形式總結分析了JavaScript操作json實現遍歷的常用技巧,并給出了實例總結,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了JS將unicode碼轉中文方法的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05