focus、input、keydown、keyup、change、blur方法的差异

当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异。

//  <input type="text" id="username"> 
var username = document.getElementById("username");
var result = [];

//  注册focus事件
username.addEventListener("focus", function(event) {
	result.push({
		event  : 'focus',
		value  : this.value,
        keyCode : event.keyCode
	});
})
//  注册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”，查看控制台的输出结果就可以很明确的发现focus、input、keydown、keyup、change、blur方法的差异，同时也可以看出focus、input、keydown、keyup、change、blur方法的执行顺序为 ：

 focus --> keydown --> input --> keyup --> change --> blur

 

转载于:https://my.oschina.net/quantou/blog/820386