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"> 
<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> 

XML/HTML代碼

復制代碼 代碼如下:

<input type="text" value="xxx"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
for(var item in o){  
alert(item+":"+o[item]);  
}  
});  
//--> 
</script> 

XML/HTML代碼

復制代碼 代碼如下:

<input type="text" value="xxx"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
alert(o.propertyName);  
});  
//--> 
</script> 

再回到我們開始的問題，我們只需要判斷是否是value被改變就ok了。
直接看代碼吧：

XML/HTML代碼

復制代碼 代碼如下:

<input type="text" value="xxx"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
if(o.propertyName!='value')return;  //不是value改變不執行下面的操作  
//.......函數處理  
});  
//--> 
</script>