HTML 的onpropertychange 事件

文章轉載自：http://www.cnblogs.com/eastday/archive/2010/01/29/1658997.html

有關onpropertychange事件

XML/HTML代碼

1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
2. <script type="text/javascript">  
3. <!--   
4. document.getElementById('xx').attachEvent('onpropertychange',function(o){alert('ok')});   
5. //-->  
6. </script>  

 

    執行上面的代碼，單擊輸入框發現也會觸發onpropertychange，輸入一個值同樣也會觸發這個事件，這就證明了，只要有屬性的值被修改就會觸發該事件。

     第二、既然我們發現了這個特點，那就會有一個問題了：當我們有時在輸入框值發生改變時希望執行一個函數操作，但同時也要修改一個自定義的屬性，這樣onpropertychange就會被觸發兩次，這個可能並不是我們所希望的。
    猜想一下，既然提供了這么一個屬性，那一定應該能獲取到是哪個屬性被改變了。試着獲取參數個數及參數內容。

XML/HTML代碼

1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
2. <script type="text/javascript">  
3. <!--   
4.     document.getElementById('xx').attachEvent('onpropertychange',function(){   
5.         alert(arguments.length);   
6.         for(var i=0;i<arguments.length;i++){   
7.             alert(arguments[i]);   
8.         }   
9.     });   
10. //-->  
11. </script>  

      執行上面一段代碼，會發現彈出了1和[object]，這說明該事件只給回調函數傳入一個參數而且是object類型。
      那我們就試試遍歷一下這個object。

XML/HTML代碼

1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
2.   <script type="text/javascript">  
3.   <!--   
4.     document.getElementById('xx').attachEvent('onpropertychange',function(o){   
5.         for(var item in o){   
6.             alert(item+":"+o[item]);   
7.         }   
8.     });   
9.   //-->  
10. </script>  

     執行一下，發現有很多個屬性，但仔細看我們可能會發現這么一個屬性：propertyname，相信每個人都能猜到這個屬性的意思了。對，這個就是用來獲取哪個屬性被修改的。

XML/HTML代碼

1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
2. <script type="text/javascript">  
3. <!--   
4.   document.getElementById('xx').attachEvent('onpropertychange',function(o){   
5.       alert(o.propertyName);   
6.   });   
7. //-->  
8. </script>  

   分別單擊文本框和輸入一個值，會發現分別彈出了myprop和value。
  
   再回到我們開始的問題，我們只需要判斷是否是value被改變就ok了。
   直接看代碼吧：

XML/HTML代碼

1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
2. <script type="text/javascript">  
3. <!--   
4.   document.getElementById('xx').attachEvent('onpropertychange',function(o){   
5.       if(o.propertyName!='value')return;  //不是value改變不執行下面的操作   
6.       //.......函數處理   
7.   });   
8. //-->  
9. </script>  

三.讓FF支持onPropertyChange類似的效果

之前做了個對input框的實時校驗，比如只允許輸入數字，用戶輸入的卻是字母等，這時候就把用戶輸入的值變為紅色等...或者對textarea文本域剩余可輸入字符的提示，就遇到了一個問題，使用onPropertyChange在IE下很好很正常，但是在FF上就么效果鳥~~~

於是在網上就找到了一個可行性方法~~ Firefox有個oninput事件效果和onPropertyChange一樣，所以同時加上oninput和onPropertyChange問題就解決鳥~~~ oo....

1	<inputtype="text"oninput="cgColor(this);"onPropertyChange="cgColor(this);"maxlength="4"name="pt_bankou"id="pt_bankou"value=""/>