了解在JavaScript中使用键盘事件的基本知识

了解在JavaScript中使用键盘事件的基本知识

与键盘事件交互时，有3种类型的事件。

• keydown 键盘键已被按下
• keyup 键盘键已被释放

keydown 当按键保持按下时，重复按键也被触发。

虽然鼠标和触摸事件通常是在一个特定的元素上监听，但监听文档上的键盘事件是很常见的。

document.addEventListener('keydown', event => {
  // key pressed
})

传递给事件监听器的参数是一个KeyboardEvent。

这个事件对象，除了事件对象的属性外，还为我们提供了（除此之外）这些独特的属性。

• altKey 如果事件发生时alt键被按下，则为true
• code 被按下的键的代码，以字符串形式返回
• ctrlKey 如果事件发生时，ctrl键被按下，则为true
• key 被按下的键的值，以字符串形式返回
• locale 键盘区域值
• location 该键在键盘上的位置
• metaKey 如果事件发生时，meta键被按下，则为true
• repeat 如果该键被重复使用（例如，该键没有被释放），则为true
• shiftKey 如果事件发生时，Shift键被按下，则为true

这个演示是一个键盘记录器，它将向你展示我上面列出的一些属性的值。

请看Flavio Copes (@flaviocopes)在CodePen上的PenKey logger演示。