JS判斷文字框內容改變事件的簡單實例_javascript技巧

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程式碼

複製程式碼 程式碼如下:

程式碼> 
 

--> 
 

-->   

發現彈出了1和[object]，這說明該事件只給回呼函數傳入一個參數而且是object類型。 那我們就試試遍歷一下這個object。 XML/HTML程式碼

複製程式碼


程式碼如下:



程式碼> 

document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
for(var item in o){   alert(item ":" o[item]){   alert(item ":" o[item]); 🎜>}   });  

//-->   

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

複製程式碼


程式碼如下:



程式碼>