input输入事件流
2018-07-13 本文已影响0人
TRYao
输入框发生的事件流程依次为focus、keydown、input、keyup、change与blur,见下图所示
输入事件流
// 假定页面存在如下元素
// <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);
})