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