JavaScript：对键盘事件做出反应

对键盘上的事件作出反应的最常见解决方案涉及处理 Web 页面上发生的 keypress 事件（DOM 主体元素（body element）。对应于 JavaScript 中被称为 document 的全局变量）。

键盘事件属性

        下面这个例子在控制台中显示了与按下的键相关的字符。字符信息由于事件关联的事件对象的 charcode 属性给出。该属性返回一个数字值（被称为 Unicode 值），可以通过 String.fromCharCode() 方法转换为一个字符串值。

// Show the pressed character
document.addEventListener("keypress", e => {
  console.log(`You pressed the ${String.fromCharCode(e.charCode)} key`);
});

输出结果如下：

        为了管理按键的按下和释放（而不仅仅是产生按键的字符），您将使用 keydown 和 keyup 事件。

        这个例子使用相同的函数来管理两个事件。这一次，按键的代码可以在 Event 对象的 keycode 属性中访问。 

// Show the pressed character
document.addEventListener("keypress", e => {
  console.log(`You pressed the ${String.fromCharCode(e.charCode)} key`);
});

// Show information on a keyboard event
const keyboardInfo = e => {
  console.log(`Keyboard event: ${e.type}, key: ${e.keyCode}`);
};

// Integrate this function into key press and release:
document.addEventListener("keydown", keyboardInfo);
document.addEventListener("keyup", keyboardInfo);

        输出结果如下：

         该结果表明，键盘相关事件的启动顺序如下：keydown -> keypress -> keyup

        按住一个键 keydown 会触发多次。