键盘事件是什么？键盘事件包括哪几种？

最新推荐文章于 2024-04-30 12:02:16 发布

让你五行代码

最新推荐文章于 2024-04-30 12:02:16 发布

阅读量1.3k

点赞数

分类专栏： JavaScript Web前端文章标签：计算机外设 javascript 开发语言

原文链接：https://www.itheima.com/news/20220317/153957.html

版权

Web前端同时被 2 个专栏收录

112 篇文章 2 订阅

订阅专栏

JavaScript

28 篇文章 1 订阅

订阅专栏

什么是键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。下面列举几个常用的键盘事件，如表所示。

事件名称	事件触发时机
keypress	某个键盘按键被按下时触发。不识别功能键，如Ctrl、Shit、箭头等
keydown	某个键盘按键被按下时触发
keyup	某个键盘按键被松开时触发

需要注意的是，keypress事件保存的按键值是ASCⅡ码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。keyup和keydown事件不区分字母大小写，而keypress区分字母大小写。

在发生keydown和keypress事件时，event事件对象的keycode属性会包含一个值，该值与键盘上的特定值对应。keycode的值与ASCⅡ码对应的值相同，例如，keycode值为13表示Enter键，keycode值为9表示Tab键。读者可参考MDN等手册进行查看，此处不再详细列举。

键盘事件对象判断用户按下了哪个键

键盘事件也有相应的键盘事件对象KeyBoardEvent,该对象是跟键盘事件相关的一系列信息的集合。根据键盘事件对象中的keyCode属性可以得到相应的ASCIⅡ码值，进而可以判断用户按下了哪个键。

为了让大家更好地理解键盘事件的使用，下面我们通过案例的形式进行展示。检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面，示例代码如下:

<body>
  <input type="text">
  <script>
    var search = document.querySelector ('input');
    document.addEventListener('keyup', function (e)  {
      if  (e.keyCode === 83)  {
        search.focus();
      }
    });
  </script>
</body>

上述代码中，第5行代码绑定了鼠标弹起事件，当输入完毕后再进行检测。第6~8行代码使用键盘事件对象里面的keyCode判断用户按下的是否是s键，如果是，则让搜索框获取焦点，帮助用户进行输入。

我们再通过一个简单的JavaScript代码示例，演示如何在网页中捕捉键盘事件：

<!DOCTYPE html>
<html>
<head>
  <title>Keyboard Event Example</title>
</head>
<body>

  <h1>Press any key on your keyboard</h1>

  <script>
    // 添加事件监听器
    document.addEventListener('keydown', function(event) {
      console.log('Key pressed:', event.key);
    });
  </script>

</body>
</html>

　　在上面的示例中，我们使用了addEventListener方法来将keydown事件附加到document对象上。每当用户按下键盘上的任何按键时，事件监听器都会被触发，并将按下的键记录在控制台中。

　　同样的，可以使用keyup事件来捕捉键盘上键的释放，如下所示：

document.addEventListener('keyup', function(event) {
  console.log('Key released:', event.key);
});

　　使用键盘事件，您可以实现各种交互和动态的功能，例如创建键盘快捷键，控制游戏角色的移动，等等。

让你五行代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
键盘事件是什么？键盘事件包括哪几种？

需要注意的是，keypress事件保存的按键值是ASCⅡ码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。每当用户按下键盘上的任何按键时，事件监听器都会被触发，并将按下的键记录在控制台中。第6~8行代码使用键盘事件对象里面的keyCode判断用户按下的是否是s键，如果是，则让搜索框获取焦点，帮助用户进行输入。使用键盘事件，您可以实现各种交互和动态的功能，例如创建键盘快捷键，控制游戏角色的移动，等等。
复制链接

扫一扫