### [JavaScript：掌握键盘事件处理](https://www.prosaas.cn/article/2559)

**Published:** 2023-09-04T03:29:02

**Author:** 5201314

**Excerpt:** 网站开发人员希望读者以某种方式与他们的网站进行交互。访问者可以上下滚动页面、在输入字段中写入内容、单击链接访问…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212120956528.jpg)

网站开发人员希望读者以某种方式与他们的网站进行交互。访问者可以上下滚动页面、在输入字段中写入内容、单击链接访问另一个页面，或者按组合键触发特定行为。作为开发人员，您应该能够捕获所有这些事件并向用户提供所需的功能。

在本教程中，我们的重点将是在 JavaScript 中处理键盘事件。我们将了解不同类型的键盘事件、处理特殊按键事件以及获取有关按下或释放的按键的信息。

## 键盘事件类型

键盘事件分为三种类型。这些称为 `keydown`、`keypress` 和 `keyup`。

只要按下某个键，就会触发 `keydown` 事件。所有键都会被触发。它们是否产生角色价值并不重要。例如，按键盘上的 **A** 或 **Alt** 键将触发 `keydown` 事件。

`keypress` 事件已弃用。它仅在按下产生字符值的键时触发。例如，按 **A** 键将触发此事件，但按 **Alt** 键则不会。您应该考虑使用 `keydown` 事件来代替它。

当用户按下的键被释放时，将触发 `keyup` 事件。

假设用户连续按下键盘上的任意键。在这种情况下，`keydown` 事件将被重复触发。一旦用户释放密钥，就会触发 `keyup` 事件。

## 监听键盘事件

此时，我想提一些相当明显的事情。键盘是一种输入设备，用于从用户那里获取一些输入。我们根据该输入采取行动。但是，用户还有其他方式发送输入。

如果您想跟踪用户在表单中填写的任何输入字段，那么在所述输入上使用其他事件（例如 `change` ）更有意义。

此外，键盘事件仅为可以接收焦点的元素生成。这包括  元素、 元素、

 元素以及具有 `contentEditable` 或 `tabindex` 属性的其他元素。

例如，除非设置 `tabindex` 或 `contentEditable` 属性，否则您将无法侦听段落元素上的键盘事件。但是，它最终会在 DOM 树中冒泡，因此您仍然可以将 `keydown` 或 `keyup` 事件侦听器附加到文档。

这是一个例子：

document.addEventListener("keydown", keyIsDown);

function keyIsDown(event) {
    // Do whatever you want!
}

您还可以将回调作为箭头函数提供：

document.addEventListener("keydown", (event) => {
    // Do whatever you want!
});

## 从键盘事件获取信息

在上一节的基本代码片段中，我们定义了一个回调函数。该函数接受 `event` 对象作为其参数。此 `event` 对象包含您可能需要访问的与 `keydown` 或 `keyup` 事件相关的所有信息。

以下是您应该了解的一些有用属性：

1.  **`key`**：该属性返回一个字符串，表示所按键的字符值。
2.  **`code`**：此属性返回一个字符串，表示按下的物理键的代码。
3.  **`repeat`**：如果长时间按住某个键，该属性将返回布尔值 `true`，导致 `keydown` 事件多次触发。
4.  **`altKey`**：如果用户按下 **Alt** 键（在 Windows 上）或 **Option** 键（在在 macOS 上）当 `keydown` 事件触发时。
5.  **`ctrlKey`**：如果用户在 `keydown` 事件触发时按下 **Control** 键，则此属性返回布尔值 `true`。
6.  **`metaKey`**：如果用户在 `keydown` 事件触发时按下 **Meta** 键，则此属性返回布尔值 `true`。
7.  **`shiftKey`**：如果用户在 `keydown` 事件触发时按下 **Shift** 键，则此属性返回布尔值 `true`。

您会注意到，我在所有最后四个属性描述中都包含了“当 `keydown` 事件被触发时”部分。这意味着，如果在执行上述任一操作时按下 **A** 或 **3** 等键，这些属性的值将为 `true` ，用于 `keydown` 事件。键也处于按下状态。

重点关注以下 CodePen 演示后，尝试按单个键或组合键，以查看不同属性的值发生变化。

如果您按键盘顶部的 **3** 键而不按 **Shift** 键，则 `key` 属性的值将变为 **3** > 并且 `code` 属性的值变为 **Digit3**。但是，按下 **Shift** 后，`key` 属性的值将变为 **#**，而 `code` 属性仍为 **Digit3**。

您可以尝试使用其他组合键进行相同的操作，您会注意到 `key` 属性的值会根据您按下的键而变化。但是，`code` 属性的值保持不变。

键盘上的某些键通常是重复的。例如，有两个 Shift 键。按左键会将 `code` 的值设置为 `ShiftLeft`。按右边会将 `code` 的值设置为 `ShiftRight`。同样，有两组数字键。字母上方的代码将为您提供 `Digit` 代码，而数字键盘上的代码将为您提供 `Numpad` 代码。

这意味着，如果您的代码依赖于检测特定键，则务必确保您使用 `code` 属性来检查按下了哪个键。

我想提的另一件重要的事情是，并不是每个人都使用 QWERTY 键盘，而且他们的键盘甚至可能不是英文的。在这种情况下，使用 `key` 属性来检查按下了哪个键很容易出错。

## 响应键盘事件

现在我们知道了如何监听键盘事件并从中提取信息，我们可以编写一些代码来对某些特定键的 `keydown` 和 `keyup` 事件做出反应。考虑以下代码片段：

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
    
  if (event.code == "KeyR" && event.repeat != true) {
    let rVal = Math.floor(200 + Math.random() \* 200);
    circle.setAttribute("style", \`width: ${rVal}px; height: ${rVal}px;\`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() \* 40);
    circle.setAttribute("style", \`border: ${rVal}px solid orangered;\`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate\_\_animated", "animate\_\_bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate\_\_animated", "animate\_\_bounce");
    }, 4000);
  }
});

我们为 `keydown` 事件创建了一个侦听器，并为 `keyup` 事件创建了另一个侦听器。这两个事件都附加到 `document`。

在 `keydown` 内，我们检查三个不同的密钥。我使用了 **R** 键的 `event.code` 属性来向您展示您可以单独按 **R** 键或与任何修饰键组合使用，并且它仍会将圆的半径更改为随机值。另一方面，我们使用 `event.key` 属性来检查其值是否为 **B**。仅当您同时按 **Shift** 和 **B** 时，此块中的代码才会执行​​，因为这种组合会导致 `event.key` 属性成为大写“B”。

在 `keyup` 内，我们检查 `ArrowUp` 键上的 `keyup` 事件。一旦钥匙被解除，我们会在四秒的延迟后删除之前附加的类。

以下 CodePen 演示展示了这一切的实际效果：

您应该尝试在上述代码中添加自己的逻辑，以便当用户按下**A**、**S**、**W**键时圆圈会移动> 和**D**。

## 最终想法

在本教程中，我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 `keydown` 和 `keyup` 事件。与这些事件关联的 `event` 对象包含您确定按下了哪个键并采取适当操作所需的所有信息。

请记住，键盘只是众多可能的输入设备之一。因此，使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下，您应该考虑使用与输入相关的事件。

以上就是JavaScript：掌握键盘事件处理的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** WordPress

---