JavaScript - 键盘事件

JavaScript 中的键盘事件提供了一种基于用户键盘输入与网页或应用程序交互的方式。这些事件允许开发者捕获并响应各种键盘操作，例如按键按下、按键释放和字符输入。JavaScript 中的主要键盘事件包括 keydown、keypress 和 keyup。

常见键盘事件

• Keydown 事件 − 当键盘上的某个键被按下时，会触发 keydown 事件。此事件为开发者提供有关被按下的特定键的信息:包括其代码以及是否同时按下某些修饰键(例如 Shift、Ctrl 或 Alt)的指示。

• Keypress 事件 − 当用户输入实际字符时，会触发 keypress 事件。非字符键(例如 Shift 或 Ctrl)不会激活此事件。开发人员经常利用它来捕获表单字段的用户输入或创建交互式输入功能。

• Keyup 事件 − 释放先前按下的按键后，系统将触发 keyup 事件;事实证明，此特定事件有助于跟踪特定按键的释放并随后执行操作，从而创建交互式用户体验。

键盘事件属性

对于 JavaScript 中的键盘事件，通常使用几个属性来收集有关所按下按键的信息。以下是一些与键盘事件特别相关的按键属性 -

示例:Keydown 事件

此示例演示了 JavaScript 的 keydown 事件的应用。按下任意键时，事件监听器都会捕获 keydown 事件，并在标记为"output"的 HTML 元素中显示该事件——其对应的键(事件属性)。

<!DOCTYPE html>
<html>
<body>
   <h3>Press any key</h3>
   <script>
      document.addEventListener('keydown', function (event) {
         document.getElementById('output').innerHTML = 
		 "Key pressed: " + event.key;
      });
   </script>
   <div id="output"></div>
</body>
</html>

示例:Keypress 事件

本例中，keypress 事件用于捕获输入的字符。输入字符时，事件监听器触发，该字符显示在 ID 为"output"的 HTML 元素中。

<!DOCTYPE html>
<html>
<body>
   <h3>Type a character</h3>
   <div id="output"></div>
   <script>
      document.addEventListener('keypress', function (event) {
         document.getElementById('output').innerHTML = 
         "Character pressed: " + event.key;
      });
   </script>   
</body>
</html>

示例:Keyup 事件

本例展示了 keyup 事件。它捕获按下按键后松开按键的事件。松开的按键会显示在屏幕上。

<!DOCTYPE html>
<html>
<body>
   <h3>Press and Release a key</h3>
   <div id="output"></div>
   <script>
      document.addEventListener('keyup', function (event) {
         document.getElementById('output').innerHTML = 
		 "Key released: " + 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>Enter some text: 
      <input onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
   </div>
   <div id="output"></div>
   <script>
      function handleKeyDown(event) {
         document.getElementById('output').innerHTML+= 
		 "Key pressed: " + event.key+'<br>Key code: ' + event.keyCode+'<br>';
      }
      function handleKeyUp(event) {
         document.getElementById('output').innerHTML+= 
		 "Key released: ' + event.key+'<br><br>";
      }
   </script>
</body>
</html>