js change,propertychange,input事件小議
更新時間：2011年12月20日 01:27:20 作者：
github上關(guān)于mootools一個issue的討論很有意思，所以就想測試記錄下。感興趣的可以點擊原頁面看看
https://github.com/mootools/mootools-core/issues/2170
這個問題來自IE(LTE8)中對checkbox和radio change事件的實現(xiàn)問題，在IE(LTE8)中測試下來，當(dāng)你點擊一個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ā)，那么當(dāng)我們想讓它一輸入東西就立即觸發(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)聽一下, 這里有篇文章(原文鏈接)對此問題進行了闡述，感興趣的也可以讀讀。
這個問題來自IE(LTE8)中對checkbox和radio change事件的實現(xiàn)問題，在IE(LTE8)中測試下來，當(dāng)你點擊一個checkbox或者radio，它的change事件是不會立即觸發(fā)，除非你讓它失去焦點，而在其他標準瀏覽器中(包括IE9)，是點擊后立即觸發(fā)change事件的，這的確是個蛋疼的問題，說到解決方法，倒也比較容易，用IE(LTE8)中元素特有的propertychange事件來處理(IE9已經(jīng)沒這玩意兒了)，就能避免上述問題，如：
復(fù)制代碼 代碼如下:
checkEl.attachEvent('onpropertychange', function() {
console.log('hey man, I am changed');
});
但是這樣就認為解決了，是不充分的，因為像checkEl.setAttribute('data-value', 'god')這樣的操作也會觸發(fā)其propertychange事件，所以我們需要用其event.propertyName來判斷下，如：
復(fù)制代碼 代碼如下:
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ā)，那么當(dāng)我們想讓它一輸入東西就立即觸發(fā)呢，參考之前的例子在IE(LTE8)中，我們可以用propertychange來實現(xiàn)，只不過propertyName的條件變成‘value'而已。在其他標準瀏覽器中(包括IE9)，我們可以用HTML5中的一個標準事件input, 如：
復(fù)制代碼 代碼如下:
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ù)的文件,無法觸發(fā)change事件問題
- JS中的oninput和onchange事件的區(qū)別及如何正確使用
- js實現(xiàn)使用輸入input和改變change事件模擬手動輸入
相關(guān)文章
通過鍵盤上的上下鍵可以選擇表格行的實現(xiàn)效果代碼。思路不錯，需要的朋友可以參考下。2009-12-12
這篇文章主要為大家詳細介紹了微信小程序使用swiper組件實現(xiàn)層疊輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
詳談for循環(huán)里面的break和continue語句
下面小編就為大家?guī)硪黄斦刦or循環(huán)里面的break和continue語句。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了原生JavaScript實現(xiàn)的無縫滾動功能,結(jié)合實例形式詳細分析了JavaScript無縫滾動具體實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-01-01
Node.js：Windows7下搭建的Node.js服務(wù)(來玩玩服務(wù)器端的javascript吧,這可不是前端js插件
什么是Node.js?還服務(wù)器端javascript?對于這個概念我在這篇文章不做解釋，可以自己去搜索了解下，服務(wù)器端js不是新技術(shù)，只是最近的node.js的火爆讓他爆發(fā)了，我會在以后的文章里解釋什么是node.js。2011-06-06
本文主要分享了js實現(xiàn)文字無縫向上滾動的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實例形式總結(jié)分析了javascript常見的遍歷、循環(huán)、歸并等數(shù)組操作相關(guān)技巧,需要的朋友可以參考下2019-01-01
下面小編就為大家?guī)硪黄猨s 自帶的sort() 方法全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
uniapp?u-picker多列用法以及設(shè)置默認選中值
uview組件庫u-picker組件可能很多人不熟悉,下面這篇文章主要給大家介紹了關(guān)于uniapp?u-picker多列用法以及設(shè)置默認選中值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06