按键事件

当按下键盘上的按键时，浏览器会触发"keydown"事件。当松开按键时，会触发"keyup"事件。

  1. <p>This page turns violet when you hold the V key.</p>
  2. <script>
  3.   window.addEventListener("keydown", event => {
  4.     if (event.key == "v") {
  5.       document.body.style.background = "violet";
  6.     }
  7.   });
  8.   window.addEventListener("keyup", event => {
  9.     if (event.key == "v") {
  10.       document.body.style.background = "";
  11.     }
  12.   });
  13. </script>

尽管从keydown这个事件名上看应该是物理按键按下时触发，但当持续按下某个按键时，会循环触发该事件。有时，你想谨慎对待它。例如，如果您在按下某个按键时向 DOM 添加按钮，并且在释放按键时再次将其删除，则可能会在按住某个按键的时间过长时，意外添加数百个按钮。

该示例查看了事件对象的key属性，来查看事件关于哪个键。 该属性包含一个字符串，对于大多数键，它对应于按下该键时将键入的内容。 对于像Enter这样的特殊键，它包含一个用于命名键的字符串（在本例中为"Enter"）。 如果你按住一个键的同时按住Shift键，这也可能影响键的名称 - "v"变为"V"，"1"可能变成"!"，这是按下Shift-1键 在键盘上产生的东西。

诸如shift、ctrl、alt和meta（Mac 上的command）之类的修饰按键会像普通按键一样产生事件。但在查找组合键时，你也可以查看键盘和鼠标事件的shiftKey、ctrlKey、altKey和metaKey属性来判断这些键是否被按下。

  1. <p>Press Ctrl-Space to continue.</p>
  2. <script>
  3.   window.addEventListener("keydown", event => {
  4.     if (event.key == " " && event.ctrlKey) {
  5.       console.log("Continuing!");
  6.     }
  7.   });
  8. </script>

按键事件发生的 DOM 节点取决于按下按键时具有焦点的元素。 大多数节点不能拥有焦点，除非你给他们一个tabindex属性，但像链接，按钮和表单字段可以。 我们将在第 18 章中回顾表单字段。 当没有特别的焦点时，document.body充当按键事件的目标节点。

当用户键入文本时，使用按键事件来确定正在键入的内容是有问题的。 某些平台，尤其是 Android 手机上的虚拟键盘，不会触发按键事件。 但即使你有一个老式键盘，某些类型的文本输入也不能直接匹配按键，例如其脚本不适合键盘的人所使用的 IME（“输入法编辑器”）软件 ，其中组合多个热键来创建字符。

要注意什么时候输入了内容，每当用户更改其内容时，可以键入的元素（例如<input>和<textarea>标签）触发"input"事件。为了获得输入的实际内容，最好直接从焦点字段中读取它。 第 18 章将展示如何实现。