迹忆客 专注技术分享

事件侦听器只是一个 JavaScript 函数，它在发生特定用户输入事件时触发。此类事件的一个简单示例是鼠标单击或键盘按钮按下。必须首先向目标注册事件侦听器函数。之后，每当我们感兴趣的特定事件发生时，我们的监听器函数就会被触发。可以将多个侦听器附加到可以侦听相同或不同事件类型的同一目标。

今天的帖子向你展示了如何在 JavaScript 中识别键盘输入事件。

这是 JavaScript 提供的内置方法，用于注册事件侦听器。它是 EventTarget 接口的一个方法。每当在目标上检测到指定的事件时，就会调用我们配置的函数。

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

你可以收听 keydown、keypress 和 keyup 三种类型的键盘事件。浏览器会触发 keydown 事件，当键盘上的某个键被按下时，当它被释放时，会触发 keyup 事件。每个键盘事件都有自己的 keyCode 或 key。例如，回车按钮有键 Enter 和 keyCode 13。

示例代码：

<input type="text" id="textId">

document.getElementById("textId").addEventListener("keydown", myFunction);

function myFunction() {

  switch (event.key) {
    case "ArrowDown":
    	console.log("ArrowDown");
      break;
    case "ArrowUp":
      console.log("ArrowUp");
      break;
    case "ArrowLeft":
      console.log("ArrowLeft");
      break;
    case "ArrowRight":
      console.log("ArrowRight");
      break;
    default:
      console.log(event.key, event.keyCode);
      return; 
  }

  event.preventDefault();
}

输出：