JavaScript 的键盘事件提供了一种根据用户的键盘输入与网页或应用程序进行交互的方式。这些事件使开发者能够捕捉并响应各种键盘操作，如按键按下、按键释放以及字符输入。JavaScript 中主要的键盘事件包括 keydown、keypress 和 keyup。
常见的键盘事件
按键按下事件 (keydown)
当键盘上的某个键被按下时，会触发 keydown 事件。此事件提供了关于被按下的特定键的信息：这包括它的代码以及是否同时按下了 Shift、Ctrl 或 Alt 等修饰键。
按键输入事件 (keypress)
当用户输入实际字符时，会触发 keypress 事件。非字符键，如 Shift 或 Ctrl，并不会激活此事件。开发者通常利用它来捕捉用户在表单字段中的输入或创建交互式的打字功能。
按键释放事件 (keyup)
当之前按下的键被释放时，系统会触发 keyup 事件；此特定事件有助于跟踪特定键的释放，并随后实施动作，从而创建交互式用户体验。
键盘事件属性
对于 JavaScript 中的键盘事件，有几个常用的属性用于收集关于被按下的键的信息。以下是一些特别与键盘事件相关的属性：
| 属性 |
描述 |
event.key |
表示被按下的键的键值的字符串。 |
event.code |
表示键盘上的物理键的字符串。 |
event.location |
表示键盘上键的位置的整数。 |
event.ctrlKey |
表示是否按下了 Ctrl 键的布尔值。 |
event.shiftKey |
表示是否按下了 Shift 键的布尔值。 |
event.altKey |
表示是否按下了 Alt 键的布尔值。 |
event.metaKey |
表示是否按下了 Meta（Command）键的布尔值。 |
event.repeat |
表示键事件是否为重复事件的布尔值。 |
event.isComposing |
表示事件是否为多键组合的一部分的布尔值。 |
event.which |
已废弃的属性；以前用于识别数字键码。 |
event.getModifierState(keyArg) |
返回一个布尔值，指示是否按下了修饰键。 |
示例：按键按下事件 (keydown)
本例展示了 keydown 事件的应用。事件监听器在按下任意键时捕获 keydown 事件，并在标识为 "output" 的 HTML 元素中显示对应的键（一个事件属性）。
<!DOCTYPE html>
<html>
<body>
<h3>按下任意键</h3>
<script>
document.addEventListener('keydown', function (event) {
document.getElementById('output').innerHTML =
"按下的键: " + event.key;
});
</script>
<div id="output"></div>
</body>
</html>
示例：按键输入事件 (keypress)
在这个例子中，keypress 事件被用来捕捉输入的字符。当字符被输入时，事件监听器被触发，并在具有 id "output" 的 HTML 元素中显示该字符。
<!DOCTYPE html>
<html>
<body>
<h3>输入一个字符</h3>
<div id="output"></div>
<script>
document.addEventListener('keypress', function (event) {
document.getElementById('output').innerHTML =
"输入的字符: " + event.key;
});
</script>
</body>
</html>
示例：按键释放事件 (keyup)
在这个例子中展示了 keyup 事件。它在键被释放后被捕获。释放的键然后会在屏幕上显示出来。
<!DOCTYPE html>
<html>
<body>
<h3>按下并释放一个键</h3>
<div id="output"></div>
<script>
document.addEventListener('keyup', function (event) {
document.getElementById('output').innerHTML =
"释放的键: " + event.key;
});
</script>
</body>
</html>
keydown 与 keypress 之间存在差异。keydown 在任何键被按下时触发，提供了有关按下的键的信息，包括修饰键。keypress 特别在字符键被按下时触发，提供有关输入字符的信息而不涉及修饰键详情。keydown 在键持续按下期间会不断触发。
在以上所有示例中，我们都使用了 addEventListener，但也可以不用这个函数来监听这些事件。这是因为你可以直接为特定属性分配事件处理程序。然而，请记住，使用 addEventListener 通常被认为是一个更好的做法，因为它允许你将多个事件处理程序附加到同一事件，并将 JavaScript 逻辑与 HTML 结构分离。
示例：不使用 addEventListener 方法
在此示例中，我们有一个输入框。当它检测到 keydown 事件 (onkeydown) 时，会调用 handleKeyDown 函数，并且当它检测到 keyup 事件 (onkeyup) 时，会调用 handleKeyUp 函数。这两个函数都会向屏幕打印适当的消息。
<!DOCTYPE html>
<html>
<body>
<div>输入一些文本:
<input onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
</div>
<div id="output"></div>
<script>
function handleKeyDown(event) {
document.getElementById('output').innerHTML+=
"按下的键: " + event.key+'<br>键码: ' + event.keyCode+'<br>';
}
function handleKeyUp(event) {
document.getElementById('output').innerHTML+=
"释放的键: " + event.key+'<br><br>';
}
</script>
</body>
</html>