Revin050
已于 2022-07-16 10:26:30 修改
2903
收藏 4
分类专栏： JS 文章标签： javascript 前端 开发语言
版权
JS
专栏收录该内容
11 篇文章1 订阅
订阅专栏
JS中的键盘事件与keycode属性
键盘事件
键盘事件与鼠标事件类似，同样常出现在开发过程中。
简单介绍三个常见的键盘事件
keydown (识别所有键)
keyup (识别所有键)
keypress (不识别功能键)
注意:三个事件的执行顺序 keydown -> keypress -> keyup
keydown
keydown的含义是指当按键按下的时候触发，可以识别所有键
具体使用如下所示
<body>
<script>
// keydown 使用方法
document.addEventListener('keydown', function() {
console.log('您已按下键盘');
})
</script>
</body>
运行结果如下
keyup
keyup的含义是指当按键按下的时候触发，可以识别所有键
具体使用如下所示
<body>
<script>
// keyup 使用方法
document.addEventListener('keyup', function() {
console.log('您已松开键盘');
})
</script>
</body>
运行结果如下
keypress
keypress的含义同样是指当按键按下的时候触发，但与keydown不同的是，keypress无法识别功能键，例如ctrl shift 左右箭头等
具体使用如下所示
<body>
<script>
// keypress 使用方法
document.addEventListener('keypress', function() {
console.log('press:您已按下键盘');
})
</script>
</body>
运行结果如下
三个键盘事件的执行顺序
利用如下代码验证三个键盘的执行顺序符合
keydown -> keypress -> keyup
代码如下
<body>
<script>
// 验证三个事件的执行顺序 keydown -- keypress -- keyup
document.addEventListener('keypress', function() {
console.log('press:您已按下键盘');
})
document.addEventListener('keydown', function() {
console.log('down:您已按下键盘');
})
document.addEventListener('keyup', function() {
console.log('您已松开键盘');
})
</script>
</body>
运行结果如下
keycode属性
在键盘事件对象中存在多种属性。其中为了获取键盘输入的值，一般使用key属性与keycode属性
key属性直接获取键盘的输入，但是该属性目前存在着兼容问题，因此并不常用
keycode属性获取键盘输入相对应的ASCII码值，在开发中较为常用
键盘事件对象属性展示
简单的展示一下键盘事件对象中所存在的属性。
<body>
<script>
document.addEventListener('keyup', function(e) {
// 展示键盘事件对象中的属性
console.log(e);
})
</script>
</body>
结果如下
其中键盘输入为a，a的ASCII码为65
keyCode属性的使用与注意事项
我们的keyup 和keydown事件不区分字母大小写 因此 a 和 A的keyCode得到的都是65
我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65
实验如下
<body>
<script>
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
</body>
运行结果如下
图中键盘输入为a
由于先运行keypress后运行keyup,因此press在前up在后
————————————————
版权声明：本文为CSDN博主「Revin050」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45847016/article/details/122497397
联系客服
