JS DOM编程笔记 - 键盘事件（十七）

曾经遇到一个面试题，如何判断用户按下了回车键？回车键的keyCode是什么？当时回答了大体流程，没有答出keyCode是什么，回来拿电脑跑了一下，是13。

今天我们来学习键盘事件的处理。

键盘事件介绍

当我们使用键盘时就会触发键盘事件，主要有下面三个键盘事件：

keydown – 当按下键盘上的一个键时触发，当按住这个键时它会重复触发。
keyup – 当松开键盘上的一个键时触发。
keypress – 当按下 a、b 或 c 等字符键时触发，按下左箭头键、home 键等不会触发，当按住键盘上的键时，按键也会重复触发。

键盘事件通常在文本框上触发，所有元素都支持键盘事件。

当我们按下键盘上的字符键时，将会按以下顺序触发三个键盘事件：

keydown
keypress
keyup

keydown 和 keypress 事件在对文本框进行任何更改之前触发，而 keyup 事件在对文本框进行更改之后触发。如果您按住字符键，则 keydown 和 keypress 会重复触发，直到松开该键。

当按下非字符键时，首先触发 keydown 事件，然后触发 keyup 事件。如果按住非字符键，则 keydown 会重复触发，直到您松开该键为止。

监听键盘事件

要监听键盘事件，按照以下步骤：

首先，选择将触发键盘事件的元素。通常，它是一个文本框。
然后，使用 addEventListener() 来绑定事件。

最简单示例如下：

<input type="text" id="message">

<script>
  let msg = document.getElementById('message');

  msg.addEventListener("keydown", (event) => {
      
      
  	// 处理keydown
  	console.log('keydown');
  });

  msg.addEventListener("keypress", (event) => {
      
      
  	// 处理keypress
  	console.log('keypress');
  });

  msg.addEventListener("keyup", (event) => {
      
      
  	// 处理keyup
  	console.log('keyup');
  });
</script>

如果按下字符键将会依次打印keydown、keypress、keyup。

如果按下其他功能键将会依次打印keydown、keyup。

键盘事件对象

键盘事件对象有三个重要的属性：key 、 code、keyCode。 key 属性返回已按下的字符，code 属性返回物理键代码，keyCode返回该键的数字代码。

比如，如果按下 z 字符键，则 event.key 返回 z，而 event.code 返回 KeyZ， event.keyCode 返回90。

请看以下示例：

<!DOCTYPE html>
<html>
<head>
	<title>键盘事件对象: Key/Code/keyCode</title>
</head>
<body>
  <input type="text" id="message">

  <script>
    let textBox = document.getElementById('message');
    textBox.addEventListener('keydown', (event) => {
      
      
      console.log(`key=${ 
        event.key},code=${ 
        event.code},keyCode=${ 
        event.keyCode}`);
    });
  </script>
</body>
</html>

如果输入字符z，将看到下面的输出

key=z,code=KeyZ,keyCode=90

如果按下功能键Enter回车键，将输出

key=Enter,code=Enter,keyCode=13

总结

当按下键盘上的字符键时，keydown、keypress 和 keyup 事件将依次触发。功能键只会触发 keydown 和keyup 事件。
键盘事件对象有三个重要的属性：key 、 code、keyCode 属性，通过它们来判断用户按下了哪个键。key 属性返回按下的键的值，code返回键盘上的物理键，keyCode返回数字的代码。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新