JS 监听键盘组合事件：快捷键的奥秘

1. 键盘事件监听

在 JavaScript 中，可以使用三个事件来监听键盘事件：

• keydown：在按下任何键时触发。
• keyup：在松开任何键时触发。
• keypress：在按下并松开任何键时触发。

这三个事件都可以使用 addEventListener() 方法来监听。例如，以下代码监听 keydown 事件，并在按下任何键时输出该键的键码：

document.addEventListener('keydown', function(event) {
  console.log(event.keyCode);
});

2. 检测修饰键

在监听键盘事件时，经常需要检测是否按下了相应的修饰键，如 ctrl、alt、shift 和 meta。这可以通过以下属性来实现：

• ctrlKey：如果按下了 ctrl 键，则为 true，否则为 false。
• altKey：如果按下了 alt 键，则为 true，否则为 false。
• shiftKey：如果按下了 shift 键，则为 true，否则为 false。
• metaKey：如果按下了 meta 键（在 Mac 电脑上，meta 键通常是 command 键），则为 true，否则为 false。

例如，以下代码监听 keydown 事件，并在按下 ctrl+a 时输出一条消息：

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.keyCode === 65) {
    console.log('您按下了 ctrl+a！');
  }
});

3. 实现 Alt+A 快捷键

现在，我们来通过一个示例演示如何使用 JavaScript 实现 Alt+A 快捷键。该快捷键的功能是将页面上的所有文本选中。

document.addEventListener('keydown', function(event) {
  if (event.altKey && event.keyCode === 65) {
    // 选中页面上的所有文本
    document.body.focus();
    document.execCommand('selectAll');
  }
});

在上面的代码中，我们首先监听 keydown 事件。当按下 Alt+A 时，会执行 document.body.focus() 方法来使页面上的正文元素获得焦点，然后执行 document.execCommand('selectAll') 方法来选中页面上的所有文本。

4. 总结

本文介绍了 JavaScript 中的键盘事件监听，重点讲解了如何监听键盘组合事件。包括使用 keydown、keyup 和 keypress 事件监听键盘事件，以及如何使用 ctrlKey、altKey、shiftKey 和 metaKey 检测是否按下了相应的修饰键。最后，还通过一个示例演示了如何使用 JavaScript 实现 Alt+A 快捷键。