输入框事件监听

当输入框的值发生变化时，我们可以通过不同的方法观察到其中的变动，例如keydown，keyup，input，onchange, blur，这些方法的应用时机不一样，应用场景也显著不同。

先看一个例子：

1	<input type="text" id="username">

JS代码如下：

var username = document.getElementById("username");
var result = [];
//注册input事件
username.addEventListener("input", function(event){
    result.push({
        event: 'input',
        value: this.value,
        keyCode: event.keyCode
    });
    /*return result;*/
})
//注册keydown事件
username.addEventListener("keydown", function(event){
    result.push({
        event: 'keydown',
        value: this.value,
        keyCode: event.keyCode
    })
    /*console.table(result);*/
})
//注册keyup事件
username.addEventListener("keyup", function(event){
    result.push({
        event: 'keyup',
        value: this.value,
        keyCode: event.keyCode
    })
})
//注册change事件
username.addEventListener("change", function(){
    result.push({
        event: 'change',
        value: this.value,
        keyCode: event.keyCode
    })
    console.table(result);
})
//注册blur事件
username.addEventListener("blur", function(){
    result.push({
        event: 'blur',
        value: this.value,
        keyCode: event.keyCode
    });
    console.table(result);
})

控制台输出内容如下：
avatar
从上面的输出结果我们可以得出如下结论：

keydown事件发生时，输入值没有任何变化，因为keydown事件不会将当前的键值计入到输入框中，所以此事件可以用来阻止某些输入字符的显示。
input事件发生时，无法获取keyCode值，但是它能及时获得用户输入的内容，它在keydown和keyup事件之间发生。
keyup事件相对比较全能，不仅能及时获知用户输入的值，还能获取keyCode值，在input事件后发生，也表示一次键盘敲入事件最终完成。
change事件发生在输入事件完成后，输入框失去焦点之前，能获取用户最终输入的值。但如果用户没有任何输入，或者输入后的值与原值一样，change事件不会被触发，但是blur事件会被触发。
blur事件与change事件表现的十分相像，输入结束后离开输入框会先后触发change和blur.
输入框发生的顺序是：

focus ===> keydown ===> input ===> keyup(至此，键盘输入事件完成) ===> change ===>blur

注意：
1.如果是中文输入的话，keydown事件监听到的keyCode值全为229，失去了参考意义。
2.如果输入速度比较快，keyup事件可能不会及时触发，但终将会触发，会有延迟，所有会出现keyup事件连续触发的情形。

如下图所示：
avatar