天天看點

oninput、onchange 和 onpropertyChange 事件

oninput:

oninput 事件在使用者輸入時觸發。該事件在<input>或者<textarea>元素的值發生改變時觸發;

無論是鍵盤輸入還是滑鼠粘貼的改變都能及時監聽到變化;

提示: 

該事件類似于 onchange 事件。

不同之處在于: 

oninput 事件在元素值發生變化時立即觸發; 
onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
浏覽器支援:
Chrome,Opera,IE9,Firefox4.0,Safari5.0
$("input[name=cities]").bind("input propertychange",function(){
        var r=$(this).val(),
            i=$(this),n=t;
        error=n.test(r)?"":errorMsgs[0][e],

            ""!=error?i.after("<div class='error'>"+error+"</div>"):$(".error").remove();
        if($("input[name="+e+"]").val()==''){
            $(this).after("<div class='error'>"+error+"</div>");
        }
    })
           

onchange:

onchange 事件會在域的内容改變時發生。也可用于單選框與複選框改變後觸發的事件。

onchange 屬性可以使用于: <input>, <select>, 和 <textarea>。

觸發事件必須滿足兩個條件:
a)目前對象屬性改變,并且是由鍵盤或滑鼠事件激發的(腳本觸發無效)
b)目前對象失去焦點(onblur)
浏覽器支援:
所有主流浏覽器均支援

onkeypress:

onkeypress 屬性在按下按鍵時觸發;就是能監聽鍵盤事件,滑鼠複制黏貼操作它就無能為力嘞。。。。。

提示:

 與 onkeypress 事件相關的事件觸發順序:

  1. onkeydown
  2. onkeypress
  3. onkeyup
注意:

onkeypress 事件在是以浏覽器中不能觸發所有按鍵(例如:ALT, CTRL, SHIFT, ESC) 。

如果隻對使用者是否已經按下一個按鍵檢測, 可以使用 onkeydown 取代, onkeydown被所有按鍵觸發。

onkeypress 屬性不能使用與以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

浏覽器支援:
所有主流浏覽器均支援;

onpropertyChange:

propertychange,隻要目前對象屬性發生改變。(IE專屬的)

不用考慮是否失去焦點,不管js操作還是鍵盤滑鼠手動操作,隻要HTML元素屬性發生改變即可立即捕獲到

關于幾個事件的差別:

1. oninput&onchange:

相同:oninput和onchange都是事件對象,當輸入框的值發生改變時觸發該事件。

不同:oninput是在值改變時立即觸發;onchange是在值改變後失去焦點才觸發,并且可以用在非輸入框中,如:select等。

2. onchange&onpropertychange:

onchange事件在内容改變(兩次内容有可能還是相等的)且失去焦點時觸發;

onpropertychange事件卻是實時觸發,即每增加或删除一個字元就會觸發,通過js改變也會觸發該事件,但是該事件IE專有。

3. oninput&onpropertychange:

oninput事件是IE之外的大多數浏覽器支援的事件,在value改變時觸發,實時的,即每增加或删除一個字元就會觸發,然而通過js改變value時,卻不會觸發;onpropertychange事件是任何屬性改變都會觸發的,而oninput卻隻在value改變時觸發,oninput要通過addEventListener()來注冊,onpropertychange注冊方式跟一般事件一樣。(此處都是指在js中動态綁定事件,以實作内容與行為分離)

注意:oninput與onpropertychange失效的情況:

(a)oninput事件:
a). 當腳本中改變value時,不會觸發;
b). 從浏覽器的自動下拉提示中選取時,不會觸發。
(b)onpropertychange事件:
當input設定為disable=true後,onpropertychange不會觸發。

******PS ******

由于 onpropertychange為IE專屬,其他浏覽器如果想要實作這一實時監聽的功能,就要用到HTML5中的标準事件oninput,不過IE9以下的浏覽器是不支援oninput事件的。 是以我們需要綜合oninput和onpropertychange二者來實作文本區域實時監聽的功能。舉例如下:
例1、對支援oninput的浏覽器用oninput,其他浏覽器(IE6/7/8)使用onpropertychange:
var testinput = document.createElement('input');          
if('oninput' in testinput){      
object.addEventListener("input",fn,false);      
}else{      
object.onpropertychange = fn;      
}      
例2、對所有ie使用onpropertychange,其他浏覽器用oninput:
var ie = !!window.ActiveXObject;      
if(ie){      
object.onpropertychange = fn;      
}else{      
object.addEventListener("input",fn,false);      
}      
*******************************************轉自:http://www.bkjia.com/webzh/874397.html****************************************

******PS ******

Input 控件的Onchange 與onBlur 事件不同?

Onchange是文本修改了時候觸發的事件,onBlur是失去焦點觸發的事件

繼續閱讀