我在input range中用過這個事件，拖的時候觸發(fā)input

h5新出的事件，輸入的時候觸發(fā)

牛，以前沒見過oninput，只知道有個onkeydown和onkeyup來獲取用戶實時的輸入

html?input?等值改變添加監(jiān)聽事件

?(2013-01-09 20:23:29)

轉(zhuǎn)載▼

標簽：?

html

?

監(jiān)聽事件

?

input

?

it

? ?分類：?web前端 ? ?

作者：自由天堂
發(fā)布站點：WEB六零零 網(wǎng)頁設(shè)計制作
原文地址：http://www.web600.net/html/editor/JavaScript/201001131529.html
轉(zhuǎn)自：xxx
要達到的效果
????很多情況下我們都會即時監(jiān)聽輸入框值的變化，以便作出即時動作去引導(dǎo)瀏覽者增強網(wǎng)站的用戶體驗感。比如即時顯示輸入框已經(jīng)被輸入的字節(jié)數(shù)，或者即時讀取輸入的值來進行搜索引導(dǎo)，也就是google的關(guān)聯(lián)搜索效果等。
????只要我們能捕獲即時事件就能做到很多事情。
需要了解的知識
????首先，我們需要了解onchange和onpropertychange的不同：

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

????了解這一點后我們發(fā)現(xiàn)onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢？

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

????oninput的使用

????下面我們先了解一下oninput如何使用。
????如果您是將注冊時間直接寫在頁面里面，那么如下寫法就可以實現(xiàn)：
<、input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

但是，將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;

復(fù)制代碼

如果這樣寫,那么將會只有medhot3被執(zhí)行


寫成這樣：

var btn1Obj = document.getElementByIdx_x_x("btn1");

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

復(fù)制代碼

執(zhí)行順序為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);

執(zhí)行順序為method1->method2->method3

復(fù)制代碼

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

????判斷IE瀏覽器

????如何將IE區(qū)分出來呢？
這似乎是一個老生常談的問題，網(wǎng)絡(luò)中有很多找那個方法，歸類為兩類：
其一，是判斷瀏覽器的功能屬性。
其二，就是判斷傳統(tǒng)的 user-agent 字符串，這可能是最古老也是最流行的檢測方式。
在這里就不做深入了解了，我們這里用一種比較簡單的方法來判斷

if("\v"=="v") {

?

?

alert("IE");

}else{

?

?

alert("NO");

}

到目前為止我們遇到的問題就已經(jīng)解決了，開始寫代碼來測試我們的思路是否能夠?qū)崿F(xiàn)。 ? ?