oninput,onpropertychange,onchange的用法

onchange觸發事件必須滿足兩個條件：

a）當前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（指令碼觸發無效）

b）當前物件失去焦點(onblur)；

onpropertychange的話，只要當前物件屬性發生改變，都會觸發事件，但是它是IE專屬的；

關於oninput事件

oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過使用者介面發生的內容變化非常有用，在內容修改後立即被觸發，不像 onchange 事件需要失去焦點才觸發。 oninput 事件相容為ie9+, ie下可以onpropertychange事件，不是本節內容。

只要內容又發生變化都會觸發oninput事件，對於用鍵盤直接輸入的純字元時比較好用，但當輸入中文時，由於中文是由多個漢語拼音組成一個漢字，沒輸入一個漢語拼音都要觸發一次oninput，但你最終想要監聽的只有最後輸入的中文字。也就是說input事件無法區分鍵盤直接輸入和非直接（輸入法）輸入。對於非直接（輸入法）輸入，則需要用到下面兩個事件。

compositionstart和compositionend屬於複合事件，用來處理IME的輸入序列。

IME（input MEthod Editor，輸入法編輯器）可以讓使用者輸入物理鍵盤上找不到的字元，例如漢字“龍”。先簡單理解為對輸入法程式的監聽。

compositionstart

在IME的文字複合系統開啟時出發,例如使用中文輸入法輸入中文時， compositionstart事件會以同步模式觸發.

compositionend

在IME的文字複合系統關閉時觸發，表示返回正常鍵盤輸入狀態。

看了兩個事件就明白,開始中文輸入時會觸發compositionstart事件選詞結束後會觸發compositionend事件,忽略這兩個事件之間的input事件即可，為元素新增這個兩個事件，做一個開關，如下:

<input type="text" id="sample" />

var node = document.querySelector('#sample'
 
);
var inputLock = false;
node.addEventListener('compositionstart', function(){
    inputLock = true;
})
node.addEventListener('compositionend', function(){
    inputLock = false;
})
node.addEventListener('input', function(){
    if(!inputLock )
    // do something for input limit

});

compositionstart 、compositionend和input三個事件的執行順序是compositionstart  -->  input (一次或多次) --> compositionend。

下面是一個對input的輸入進行監聽的一段例項程式碼，通過inputLock來過濾IME時的input事件。

function initNameInputEvent(){ 
    var $name = $("#name"); 
    var inputLock = false;
    $name.bind('input propertychange',
        function(e){    
            if(!inputLock)
                onInputChange(e.target);    
        }); 
    $name.bind('compositionstart', 
        function(){ 
            console.log("start");    
            inputLock = true; 
        }); 
    $name.bind('compositionend', 
        function(e){ 
            inputLock = false; 
            onInputChange(e.target); 
        }); 
}