當輸入框的值發生變化時，我們可以通過keydown、keyup、input、onchange、blur事件觀察到其值的變化，但它們的應用時機與應用場景存在顯著的差異。

1. 實時觀察

需要觀察到使用者每次鍵盤輸入的變化，必須要用keydown、keyup與input，onchange與blur無效。在這其中，keyup與input都能及時獲取到使用者輸入的全值，而keydown不會將當前的鍵值計入到輸入框的值中，示例如下：

//  假定頁面存在如下元素
//  <input type="text" id="username">
//  註冊input事件
username.addEventListener("input"
 
, function(event) {
    result.push({
        event  : 'input',
        value  : this.value,
        keyCode : event.keyCode
    });
})
//  註冊keydown事件
username.addEventListener("keydown", function(event) {
    result.push({
        event  : 'keydown',
        value  : this.value,
        keyCode : event.keyCode
    });
});
//  註冊keyup事件
 

username.addEventListener("keyup", function(event) {
    result.push({
        event  : 'keyup',
        value  : this.value,
        keyCode : event.keyCode
    });
});
//  註冊change事件
username.addEventListener("change", function(event) {
    result.push({
        event  : 'change',
        value  : this
 
.value,
        keyCode : event.keyCode
    });
    //  輸出結果
    console.table(result);
});
//  註冊blur事件
username.addEventListener("blur", function(event) {
    result.push({
        event  : 'blur',
        value  : this.value,
        keyCode : event.keyCode
    });
    //  輸出結果
    console.table(result);
})

聚焦到輸入框中，依次輸入“abc”，最後控制檯的輸出結果如下圖所示。

從圖中可以看出如下結論：
1. keydown事件發生時，輸入值並沒有發生變化，所以keydown可用於阻止某些輸入字元的顯示。
2. input事件發生時，無法獲取到keyCode值，並且緊隨在keydown事件之後。
3. keyup事件最後發生，一次鍵盤敲入事件徹底完成。
4. change事件只會發生在輸入完成後，也就是輸入框失去焦點之前。

2. 輸入完成後觀察

當用戶完成所有的輸入時，這時候必定會發生blur事件，只有這時才會觸發change，所以可用blur與change監聽使用者輸入是否完成，輸入框的驗證多半發生在此時。

3. 輸入事件流

輸入框發生的事件流程依次為focus、keydown、input、keyup、change與blur，見下圖所示。