oninput,onpropertychange,onchange的用法
onchange觸發事件必須滿足兩個條件:
a)當前對象屬性改變,并且是由鍵盤或鼠標事件激發的(腳本觸發無效)
b)當前對象失去焦點(onblur);
onpropertychange的話,只要當前對象屬性發生改變,都會觸發事件,但是它是IE專屬的;
oninput是onpropertychange的非IE瀏覽器版本,支持firefox和opera等瀏覽器,但有一點不同,它綁定于對象時,并非該對象所有屬性改變都能觸發事件,它只在對象value值發生改變時奏效。
停止冒泡事件
if (e) //停止事件冒泡 e.stopPropagation();
else window.event.cancelBubble = true;
執行上面的代碼,單擊輸入框發現也會觸發onpropertychange,輸入一個值同樣也會觸發這個事件,這就證明了,只要有屬性的值被修改就會觸發該事件。
第二、既然我們發現了這個特點,那就會有一個問題了:當我們有時在輸入框值發生改變時希望執行一個函數操作,但同時也要修改一個自定義的屬性,這樣onpropertychange就會被觸發兩次,這個可能并不是我們所希望的。
猜想一下,既然提供了這么一個屬性,那一定應該能獲取到是哪個屬性被改變了。試著獲取參數個數及參數內容。
XML/HTML代碼
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
});
-->
</script>
執行上面一段代碼,會發現彈出了1和[object],這說明該事件只給回調函數傳入一個參數而且是object類型。
那我們就試試遍歷一下這個object。XML/HTML代碼
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var item in o){
alert(item+":"+o[item]);
}
});
//-->
</script>
執行一下,發現有很多個屬性,但仔細看我們可能會發現這么一個屬性:propertyname,相信每個人都能猜到這個屬性的意思了。對,這個就是用來獲取哪個屬性被修改的。XML/HTML代碼
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alert(o.propertyName);
});
//-->
</script>
分別單擊文本框和輸入一個值,會發現分別彈出了myprop和value。再回到我們開始的問題,我們只需要判斷是否是value被改變就ok了。
直接看代碼吧:
XML/HTML代碼
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //不是value改變不執行下面的操作
//.......函數處理
});
//-->
</script>