我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：
<body>
<input id='user' type="text" />
</body>
<script>
var user = document.getElementById('user');
var res = [];
user.onkeyup = function(event){
res.push({
event: 'keyup',
value: this.value,
keyCode: event.keyCode
})
}
user.onkeydown = function(event){
res.push({
event: 'keydown',
value: this.value,
keyCode: event.keyCode
})
}
user.oninput = function(event){
res.push({
event: 'input',
value: this.value,
keyCode: event.keyCode
})
}
user.onchange = function(event){
res.push({
event: 'change',
value: this.value,
keyCode: event.keyCode
})
console.log('change-------------');
console.table(res)
}
user.onblur = function(event){
res.push({
event: 'blur',
value: this.value,
keyCode: event.keyCode
})
console.log('blur-------------');
console.table(res)
}
输入英文 ‘ab’ 结果如下图：
可以看出触发事件的顺序依次为 keydown -> input -> keyup -> change -> blur
- keydown总是不能准确的拿到输入框的value
- input总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup总是能准确的拿到输入框的value，也能拿到当前输入的keyCode
注意：当输入完毕敲回车键后能触发change事件但不能触发blur事件，只有把光标从输入框移除后才能触发blur事件
输入汉字 ‘啊’ 结果如下图：
可以看出触发事件的顺序大致和输入英文保持一致，但也不完全相同。
- keydown仍然总是不能准确的拿到输入框的value
- input仍然总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup变得不总是能准确的拿到输入框的value
注意：输入汉字的时候我们没有谈论keyCode，因为它变得有些诡异，甚至会因此导致一些处理不慎的错误。
今天的文章keydown、input、keyup分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/31974.html
