js輸入框文本值更改監聽事件

onchange和onpropertychange的不同: 
IE下,當一個HTML元素的屬性改變的時候,都能通過 onpropertychange來即時捕獲。 
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)纔可以激活該事件。 
onpropertychange只在IE下有效果,
其他瀏覽器下可以使用oninput事件來達到同樣的效果,我們只需要把IE瀏覽器區分出來就可以

oninput的使用 

 
註冊事件直接寫在頁面裏面:
<input type="text" name="textfield" οninput="alert(this.value);" onpropertychange="alert(this.value)" /> 
但是,將oninput寫在JS代碼中分離出來時與普通事件註冊的方法有些不同,必須使用addEventListener來註冊。


attachEvent和addEventListener 的不同 
 
attachEvent方法,爲某一事件附加其它的處理事件。(不支持Mozilla系列) 
addEventListener方法 用於 Mozilla系列 
舉例: 
document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3; 
如果這樣寫,那麼將會只有medhot3被執行 
寫成這樣: 
var btn1Obj = document.getElementById("btn1"); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3); 
執行順序爲method3->method2->method1 
如果是Mozilla系列,並不支持該方法,需要用到addEventListener 
var btn1Obj = document.getElementById("btn1"); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false); 
執行順序爲method1->method2->method3 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章