JS中常用的键盘事件与keycode属性

Revin050

已于 2022-07-16 10:26:30 修改

阅读量5.1k

点赞数 4

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-01-14 17:04:24 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122497397

版权

JS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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在后
在这里插入图片描述

Revin050

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中常用的键盘事件与keycode属性

JS中的键盘事件与keycode属性键盘事件键盘事件与鼠标事件类似，同样常出现在开发过程中。简单介绍三个常见的键盘事件keydownkeyupkeypress注意:三个事件的执行顺序 keydown -> keypress -> keyupkeydownkeydown的含义是指当按键按下的时候触发，可以识别所有键具体使用如下所示<body> <script> // keydown 使用方法 docume
复制链接

扫一扫