淺析html input 等值改變加入監聽事件

要達到的效果

很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。例如即時顯示輸入框已經被輸入的位元組數，或是即時讀取輸入的值來進行搜尋引導，也就是google的關聯搜尋效果等。
只要我們能捕捉即時事件就能做到很多事情。
需要了解的知識
首先，我們需要了解onchange和onpropertychange的不同：

IE下，當一個HTML元素的屬性改變的時候，都能透過onpropertychange來即時捕捉。
onchange在屬性值改變時也必須使得當前元素失去焦點(onblur)才可以啟動該事件。

了解這一點後我們發現onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另一個時間來代替onpropertychange呢？

經過翻閱資料得知，在其他瀏覽器下可以使用oninput事件來達到同樣的效果，真是太好了，我們只需要把IE瀏覽器區分出來就可以。

oninput的使用

下面我們先了解oninput如何使用。
 如果您是將註冊時間直接寫在頁裡面，那麼如下寫法就可以實現：
cffb9f3c7c59ef7e77aeed4be02a640e

但是，將oninput寫在JS程式碼中分離出來時與普通事件註冊的方法有些不同，必須使用addEventListener來註冊。

attachEvent和addEventListener 的不同

說到這裡我們再來了解attachEvent和addEventListener 的使用方法：

attachEvent方法，為某一事件附加其它的處理事件。 （不支援Mozilla系列）
addEventListener方法用於Mozilla系列

範例:

document.getElementByIdx_x_x("btn").onclick = method1;   
  
document.getElementByIdx_x_x("btn").onclick = method2;   
  
document.getElementByIdx_x_x("btn").onclick = method3;

如果這樣寫,那麼將會只有medhot3被執行

寫成這樣：

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

執行順序為method3->method2->method1

如果是Mozilla系列，不支援該方法，需要用到addEventListener

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.addEventListener("click",method1,false);   
  
btn1Obj.addEventListener("click",method2,false);   
  
btn1Obj.addEventListener("click",method3,false);   
  
执行顺序为method1->method2->method3

#了解如何使用addEventListener來註冊oninput事件後我們再回到要解決的問題[分割瀏覽器]。

判斷IE瀏覽器

如何將IE區分出來呢？
這似乎是一個老生常談的問題，網路中有很多找那個方法，歸類為兩類：
其一，是判斷瀏覽器的功能屬性。
其二，就是判斷傳統的 user-agent 字串，這可能是最古老也是最受歡迎的偵測方式。
在這裡就不做深入了解了，我們這裡用一種比較簡單的方法來判斷

if("\v"=="v") {   
  
  alert("IE");   
  
}else{   
  
  alert("NO");   
  
}

到目前為止我們遇到的問題就已經解決了，開始寫程式碼來測試我們的思路是否能夠實現。

以上這篇淺析html input 等值改變添加監聽事件就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多淺析html input 等值改變加入監聽事件相關文章請關注PHP中文網！