按下键时的 JavaScript

当用户在 Web 应用中按下任何键时，事件将被触发并可以使用 JavaScript 来处理该事件。

在 JavaScript 中创建一个按键事件的处理程序通常涉及以下步骤：

1. 获取需要触发事件的元素。
2. 为元素添加一个事件监听器。
3. 在事件监听器函数中编写处理代码。

获取需要触发事件的元素

首先，需要获取用户将在其上按下按键的元素。这可以是整个文档、文本输入框或自定义按钮等。

在 JavaScript 中，可以使用 getElementById() 或 querySelector() 方法获取元素。

// 获取 ID 为 "my-element" 的元素
const myElement = document.getElementById("my-element");

// 获取类名为 "my-class" 的第一个元素
const myElement = document.querySelector(".my-class");

添加事件监听器

接下来，需要在选定的元素上添加事件监听器。可以为任何元素添加事件监听器，但我将为一个按钮示例。

<button id="my-button">点击我！</button>

然后使用 addEventListener() 方法为按钮添加按键事件的监听器：

const myButton = document.getElementById("my-button");

myButton.addEventListener("keydown", function(event) {
  // 在这里编写处理代码
});

请注意，此处的事件类型为 keydown。除 keydown 外，还有其他事件类型，如 keyup、keypress 等。

编写事件处理代码

在事件监听器函数中编写代码后，我们可以检查事件对象，并根据用户按下的键执行不同的操作。

myButton.addEventListener("keydown", function(event) {
  // 防止浏览器默认的键盘事件（例如：向下滚动屏幕）
  event.preventDefault();

  // 获取用户按下的键并根据不同的键执行不同的操作
  if (event.keyCode === 27) {
    // 用户按下了 Esc 键，关闭窗口
    window.close();
  } else if (event.keyCode === 13) {
    // 用户按下了 Enter 键，提交表单
    const form = document.getElementById("my-form");
    form.submit();
  }
});

在上面的示例中，我们首先使用 event.preventDefault() 防止浏览器默认的键盘事件（例如向下滚动屏幕）。

接着我们使用 event.keyCode 获取用户按下的键，根据不同的键执行不同的操作。

注意事项

• keyCode 已经被列为过时，可以使用 key 属性来检查按下的按键。
• 在执行一些操作（例如调用 window.close()）可能会导致浏览器中止代码的执行，因此需要小心使用。

结论

使用 JavaScript，您可以轻松地处理键盘事件。要添加按键事件的处理程序，请获取需要触发事件的元素并添加一个事件监听器，在监听器函数中编写处理代码。