迹忆客 专注技术分享

本教程介绍了如何使用某些内置函数来创建快捷方式并设置热键，这些函数在 JavaScript 中侦听用户的输入。本文还将详细介绍 JavaScript 中的事件和事件监听器。

什么是事件

从编码的角度来看，我们进行的物理活动会引起一个事件。这些事件是程序执行的驱动力；它在使用图形用户界面 (GUI) 时很有帮助。

我们可以通过使用事件侦听器过程来制作这些快捷方式和热键，该过程侦听特定事件并将此信息传递给处理程序以处理事件。

简而言之，输入按下的键（鼠标或键盘），我们也可以直接使用处理这些事件的事件处理程序。我们将深入演示这两种范式。

JavaScript 中最常见的 EventListeners 是什么

JS 中有很多事件处理函数，这两个是最常见的，它们的作用是：

• keydown：当你按下一个键时注册，如果你按住它会持续注册
• keyup：释放键时注册

JavaScript 中的 Keydown 事件监听器

.onkeydown 事件处理程序告诉编译器在按下所需的键后立即运行某个 function()；通过放置一个 alert("message")，我们可以显示一个包含指定消息的警报框。

在下面的代码中，我们使用了两个事件属性，.key，它将返回按下的键的标签，以及 .keyCode，它返回特定键的代码。这些键码类似于 ASCII，因为每个键都映射到特定的字母数字值。

在我们的示例中，我们输入 k 作为函数参数。

document.onkeydown = function(e) {
  alert(e.key + e.keyCode);  // shows k75
};

一旦按下特定键，我们就会收到一条警报，显示按下的键与其键代码连接。按键标签和按键代码使操作代码逻辑更容易，广泛用于事件驱动的操作。

让我们看一个例子，展示我们如何利用这些参数来发挥我们的优势。

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37:
      alert('left');  // show the message saying left"
      break;
    case 38:
      alert('up');  // show the message saying up"
      break;
    case 39:
      alert('right');  // show the message saying right"
      break;
    case 40:
      alert('down');  // show the message saying down"
      break;
  }
};

在这里，我们使用一个简单的 switch case，它接收按键代码，检查它属于哪个 case，并评估它以显示一条消息。假设我们按下左箭头键；然后它将显示 left 警报，依此类推。

我们也可以用这种方式定义事件监听器：

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

在这里，我们看一下另一种范式，以及它与我们以前的方法有何不同：

document.addEventListener('keydown', function(event) {
  if (event.key == 'ArrowLeft') {
    alert('Left key');  // show the message saying Left key"
  } else if (event.key == 'ArrowUp') {
    alert('Up key');  // show the message saying Up key"
  } else if (event.key == 'ArrowRight') {
    alert('Right key');  // show the message saying Right key"
  } else if (event.key == 'ArrowDown') {
    alert('Down key');  // show the message saying Down key"
  }
});

这段代码似乎给出了与我们之前的代码相同的输出。尽管如此，这里还是有一个问题，这里我们没有明确地使用键代码来玩弄我们的逻辑，而是直接使用诸如向下箭头和向上箭头之类的键标签并比较它们以显示所需的消息。

假设我们按下了向上箭头，那么我们的 if 代码块将检查从函数返回的键标签是否与给定的键标签匹配。如果是，则执行该块，并显示一条消息。

现在，当我们可以记住更容易记住的助记键标签时，我们不必记住每个键的键码。当我们不知道按键代码并涉足逻辑时，这非常方便。