在Web開發(fā)中，我們有時會需要動態(tài)監(jiān)聽輸入框值的變化，當(dāng)使用onkeydown、onkeypress、onkeyup作為監(jiān)聽事件時，會發(fā)現(xiàn)一些復(fù)制粘貼等操作用不了，同時，在處理組合快鍵鍵的時候也很麻煩。這時候我們需要更專業(yè)的解決方案：HTML5標(biāo)準(zhǔn)事件oninput、onchange和IE專屬的事件properchange。

1.oninput&onchange：

oninput和onchange都是事件對象，當(dāng)輸入框的值發(fā)生改變時觸發(fā)該事件。不同的是，oninput是在值改變時立即觸發(fā)，而onchange是在值改變后失去焦點(diǎn)才觸發(fā)，并且可以用在非輸入框中，如：select等。

2.propertychange：

功能同oninput，用以替代oninput在IE9以下的不兼容性。

3.output:

output是一個HTML5標(biāo)簽,IE系列瀏覽不兼容，主要用于計算輸出。如：

propertychange 和 input 事件:

1）propertychange只要當(dāng)前對象的屬性發(fā)生改變就會觸發(fā)該事件

2）input是標(biāo)準(zhǔn)的瀏覽器事件，一般應(yīng)用于input元素，當(dāng)input的value發(fā)生變化就會發(fā)生，無論是鍵盤輸入還是鼠標(biāo)黏貼的改變都能及時監(jiān)聽到變化

$(function(){

    $('#username').bind('input propertychange', function() { 

    $('#result').html($(this).val().length + ' characters'); 

  }); 

}) 

這里bind同時綁定了input和propertychange兩個方法。