JavaScript：捕获键盘事件并做出反应

在本文中，我们将讨论如何在 JavaScript 中捕获并响应不同的键盘事件。我将向您展示几个现实世界的示例，以使其易于理解。

JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论不同的提示和技巧，它们将帮助您进行日常 JavaScript 开发。

作为一名 JavaScript 开发人员，有时您需要实现一些功能，要求您处理键盘事件并根据它们执行操作。幸运的是，JavaScript 提供了一个内置的 KeyboardEvent 对象，它允许您处理不同类型的键盘事件。

JavaScript 中的键盘事件

在 JavaScript 中，KeyboardEvent 对象提供了三个事件：按键按下、按键按下和按键弹起。

当您按下键盘上的任意键时，一系列事件将按以下顺序发生。

• 按下键
• 按键
• 按键

当按下键盘上的任意键时，会触发按键事件。并且如果长时间按下某个键，则会重复触发按键按下事件。

按键事件主要在按下任何可打印字符时触发，并在按键事件后触发。事实上，按键事件用于中继按键事件产生的字符。大多数情况下，非字符键不会引发按键事件。尽管某些浏览器支持此事件，但不建议依赖此事件，因为它将从网络标准中删除。

按键事件已被弃用，并将在现代浏览器中逐步淘汰。

最后，释放按键时会引发按键事件。基本上，按键按下和按键按下事件的组合为您提供了一个代码，该代码指示按下的键。

每个键盘事件都提供两个重要的属性：key 和 code。 key 属性用按下的字符填充，而 code 属性用字符的物理键位置填充。例如，如果按 a 字符键，则 key 属性将填充为 a，并且 code 属性将填充为 KeyA 常量。但是，按下的键码不一定与字符相同！如果用户设置了备用键盘布局，例如 Dvorak，则按相同的键代码将产生不同的字符。

以上是 JavaScript 中键盘事件的简要概述。从下一节开始，我们将讨论这些事件以及现实世界的示例，以了解它们是如何工作的。

keydown 事件

在本节中，我们将了解 keydown 事件如何在 JavaScript 中工作。当按下键盘上的任意键时，会触发 keydown 事件。

让我们快速浏览一下以下示例。

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyValue: " + keyValue);
  console.log("codeValue: " + codeValue);
}, false);

登录后复制