处理键盘事件

键盘事件是 Web 开发中常见的一种用户交互方式。当用户按下或释放键盘上的某个键时，浏览器会触发相应的键盘事件。本节将讨论如何使用 JavaScript 处理键盘事件，并介绍一些常用的技巧和最佳实践。

监听键盘事件

要监听键盘事件，可以使用 addEventListener() 方法将事件监听器附加到文档对象或特定元素上。以下是一些常见的键盘事件：

• keydown：当用户按下键盘上的某个键时触发。
• keyup：当用户释放键盘上的某个键时触发。
• keypress：当用户按下并释放某个键时触发。与 keydown 和 keyup 不同，keypress 事件只在按下可打印字符键（例如字母、数字和符号）时触发。

下面是一个示例，它监听 keydown 事件并在控制台中打印被按下的键的 ASCII 码：

document.addEventListener('keydown', (event) => {
  console.log(event.keyCode); // 回车为 13
});

在上面的示例中，我们使用 addEventListener() 方法将事件监听器附加到文档对象上，并在事件处理函数中获取 keyCode 属性来获取被按下的键的 ASCII 码。请注意，keyCode 属性已被标记为过时，推荐使用 key 或 code 属性代替，但是有些老的项目中，可能还会见到这种写法。

以下是上面示例的更新版本，使用 key 属性来获取被按下的键的值：

document.addEventListener('keydown', (event) => {
  console.log(event.key); // 回车为 `Enter`
});

在上面的示例中，我们使用 key 属性来获取被按下的键的值。这是一个更好的选择，因为它提供了更多的信息，例如按下的是字母键还是数字键，以及 Shift、Ctrl、Alt 等修饰键是否同时按下。

避免事件冒泡和默认行为

在处理键盘事件时，需要注意阻止事件冒泡和默认行为，以确保事件的处理不会受到其他元素或浏览器的干扰。例如，当用户按下 Enter 键时，可能会触发表单提交事件或链接跳转事件，我们需要阻止这些默认行为，以便在事件处理函数中执行自己的逻辑。

以下是一个示例，它监听 keydown 事件并阻止 Enter 键的默认行为：

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止默认行为
    // 处理 Enter 键的逻辑
  }
});

在上面的示例中，我们首先检查被按下的键是否是 Enter 键，然后调用 preventDefault() 方法来阻止默认行为。这样可以确保在事件处理函数中执行我们自己的逻辑。

另外，如果您需要停止事件的传播，可以使用 stopPropagation() 方法。例如，以下是一个示例，它监听 keydown 事件并阻止事件冒泡：

document.addEventListener('keydown', (event) => {
  event.stopPropagation(); // 停止事件冒泡
  // 处理键盘事件的逻辑
});

在上面的示例中，我们调用 stopPropagation() 方法来停止事件的传播。这样可以确保事件只被当前元素处理，而不会继续传播到其他元素。

键盘事件的兼容性

在处理键盘事件时，需要注意浏览器的兼容性。不同的浏览器可能对键盘事件的处理方式略有不同，例如某些浏览器可能使用 keyCode 属性而不是 key 属性来表示被按下的键。为了确保代码在各种浏览器中都能正常工作，可以使用一些库或框架。

另外，需要注意的是，某些浏览器可能会禁用某些键盘事件，例如移动端浏览器可能会禁用键盘事件以提高性能。因此，在选择键盘事件作为用户交互方式时，需要考虑到这些因素，并提供备选方案以确保用户体验的良好性。