24 【键盘事件】

键盘事件

1.键盘事件的种类

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

• keydown：按下键盘时触发。
• keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
• keyup：松开键盘时触发该事件。

如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。

1. keydown
2. keypress
3. keydown
4. keypress
5. …（重复以上过程）
6. keyup

2.KeyboardEvent 接口概述

KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。

除了Event接口提供的属性，还可以配置以下字段，它们都是可选。

• key：字符串，当前按下的键，默认为空字符串。
• code：字符串，表示当前按下的键的字符串形式，默认为空字符串。
• location：整数，当前按下的键的位置，默认为0。
• ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
• shiftKey：布尔值，是否按下 Shift 键，默认为false。
• altKey：布尔值，是否按下 Alt 键，默认为false。
• metaKey：布尔值，是否按下 Meta 键，默认为false。
• repeat：布尔值，是否重复按键，默认为false。

3.KeyboardEvent 的实例属性

/*
 * 键盘事件：
 * 	onkeydown
 * 		- 按键被按下
 * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
 * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
 * 			这种设计是为了防止误操作的发生。
 * 	onkeyup
 * 		- 按键被松开
 * 
 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
 */

3.1 KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey

以下属性都是只读属性，返回一个布尔值，表示是否按下对应的键。

• KeyboardEvent.altKey：是否按下 Alt 键
• KeyboardEvent.ctrlKey：是否按下 Ctrl 键
• KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
• KeyboardEvent.shiftKey：是否按下 Shift 键

下面是一个示例。

function showChar(e) {
   
  console.log('ALT: ' + e.altKey);
  console.log('CTRL: ' + e.ctrlKey);
  console.log('Meta: ' + e.metaKey);
  console.log('Shift: ' + e.shiftKey);
}

document.body.addEventListener('keydown', showChar, false);

3.2 KeyboardEvent.charCode和KeyboardEvent.keyCode属性

e.charCode 属性通常用于 onkeypress 事件中，表示用户输入的字符的 “字符码”。

e.keyCode 属性通常用于 onkeydown 事件和 onkeyup 中，表示用户按下的按键的 “键码”。

3.2.1 charCode字符码

字符	字符码
0 ~ 9	48 ~ 57