JS來推斷文字框內容改變事件

標籤：style   class   java   ext   get   使用   

   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.getElementById(‘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.getElementById(‘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.getElementById(‘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.getElementById(‘xx‘).attachEvent(‘onpropertychange‘,function(o){   
     if(o.propertyName!=‘value‘)return;  //不是value改變不運行以下的操作   
      //.......函數處理   
 });   
//-->  
</script>