# 键盘事件
## 键盘事件的种类
键盘事件由用户击打键盘触发,主要有`keydown`、`keypress`、`keyup`三个事件,它们都继承了`KeyboardEvent`接口。
- `keydown`:按下键盘时触发。
- `keypress`:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发`keydown`事件,再触发这个事件。
- `keyup`:松开键盘时触发该事件。
如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。
1. keydown
1. keypress
1. keydown
1. keypress
1. ...(重复以上过程)
1. keyup
## KeyboardEvent 接口概述
`KeyboardEvent`接口用来描述用户与键盘的互动。这个接口继承了`Event`接口,并且定义了自己的实例属性和实例方法。
浏览器原生提供`KeyboardEvent`构造函数,用来新建键盘事件的实例。
```javascript
new KeyboardEvent(type, options)
```
`KeyboardEvent`构造函数接受两个参数。第一个参数是字符串,表示事件类型;第二个参数是一个事件配置对象,该参数可选。除了`Event`接口提供的属性,还可以配置以下字段,它们都是可选。
- `key`:字符串,当前按下的键,默认为空字符串。
- `code`:字符串,表示当前按下的键的字符串形式,默认为空字符串。
- `location`:整数,当前按下的键的位置,默认为`0`。
- `ctrlKey`:布尔值,是否按下 Ctrl 键,默认为`false`。
- `shiftKey`:布尔值,是否按下 Shift 键,默认为`false`。
- `altKey`:布尔值,是否按下 Alt 键,默认为`false`。
- `metaKey`:布尔值,是否按下 Meta 键,默认为`false`。
- `repeat`:布尔值,是否重复按键,默认为`false`。
## KeyboardEvent 的实例属性
### KeyboardEvent.altKey,KeyboardEvent.ctrlKey,KeyboardEvent.metaKey,KeyboardEvent.shiftKey
以下属性都是只读属性,返回一个布尔值,表示是否按下对应的键。
- `KeyboardEvent.altKey`:是否按下 Alt 键
- `KeyboardEvent.ctrlKey`:是否按下 Ctrl 键
- `KeyboardEvent.metaKey`:是否按下 meta 键(Mac 系统是一个四瓣的小花,Windows 系统是 windows 键)
- `KeyboardEvent.shiftKey`:是否按下 Shift 键
下面是一个示例。
```javascript
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);
```
### KeyboardEvent.code
`KeyboardEvent.code`属性返回一个字符串,表示当前按下的键的字符串形式。该属性只读。
下面是一些常用键的字符串形式,其他键请查[文档](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values)。
- 数字键0 - 9:返回`digit0` - `digit9`
- 字母键A - z:返回`KeyA` - `KeyZ`
- 功能键F1 - F12:返回 `F1` - `F12`
- 方向键:返回`ArrowDown`、`ArrowUp`、`ArrowLeft`、`ArrowRight`
- Alt 键:返回`AltLeft`或`AltRight`
- Shift 键:返回`ShiftLeft`或`ShiftRight`
- Ctrl 键:返回`ControlLeft`或`ControlRight`
### KeyboardEvent.key
`KeyboardEvent.key`属性返回一个字符串,表示按下的键名。该属性只读。
如果按下的键代表可打印字符,则返回这个字符,比如数字、字母。
如果按下的键代表不可打印的特殊字符,则返回预定义的键值,比如 Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,Esc,Spacebar,PageUp,PageDown,End,Home,Left,Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,NumLock,Scroll 等。
如果同时按下一个控制键和一个符号键,则返回符号键的键名。比如,按下 Ctrl + a,则返回`a`;按下 Shift + a,则返回大写的`A`。
如果无法识别键名,返回字符串`Unidentified`。
### KeyboardEvent.location
`KeyboardEvent.location`属性返回一个整数,表示按下的键处在键盘的哪一个区域。它可能取以下值。
- 0:处在键盘的主区域,或者无法判断处于哪一个区域。
- 1:处在键盘的左侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
- 2:处在键盘的右侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
- 3:处在数字小键盘。
### KeyboardEvent.repeat
`KeyboardEvent.repeat`返回一个布尔值,代表该键是否被按着不放,以便判断是否重复这个键,即浏览器会持续触发`keydown`和`keypress`事件,直到用户松开手为止。
## KeyboardEvent 的实例方法
### KeyboardEvent.getModifierState()
`KeyboardEvent.getModifierState()`方法返回一个布尔值,表示是否按下或激活指定的功能键。它的常用参数如下。
- `Alt`:Alt 键
- `CapsLock`:大写锁定键
- `Control`:Ctrl 键
- `Meta`:Meta 键
- `NumLock`:数字键盘开关键
- `Shift`:Shift 键
```javascript
if (
event.getModifierState('Control') +
event.getModifierState('Alt') +
event.getModifierState('Meta') > 1
) {
return;
}
```
上面代码表示,只要`Control`、`Alt`、`Meta`里面,同时按下任意两个或两个以上的键就返回。
- 前言
- 入门篇
- 导论
- 历史
- 基本语法
- 数据类型
- 概述
- null,undefined 和布尔值
- 数值
- 字符串
- 对象
- 函数
- 数组
- 运算符
- 算术运算符
- 比较运算符
- 布尔运算符
- 二进制位运算符
- 其他运算符,运算顺序
- 语法专题
- 数据类型的转换
- 错误处理机制
- 编程风格
- console 对象与控制台
- 标准库
- Object 对象
- 属性描述对象
- Array 对象
- 包装对象
- Boolean 对象
- Number 对象
- String 对象
- Math 对象
- Date 对象
- RegExp 对象
- JSON 对象
- 面向对象编程
- 实例对象与 new 命令
- this 关键字
- 对象的继承
- Object 对象的相关方法
- 严格模式
- 异步操作
- 概述
- 定时器
- Promise 对象
- DOM
- 概述
- Node 接口
- NodeList 接口,HTMLCollection 接口
- ParentNode 接口,ChildNode 接口
- Document 节点
- Element 节点
- 属性的操作
- Text 节点和 DocumentFragment 节点
- CSS 操作
- Mutation Observer API
- 事件
- EventTarget 接口
- 事件模型
- Event 对象
- 鼠标事件
- 键盘事件
- 进度事件
- 表单事件
- 触摸事件
- 拖拉事件
- 其他常见事件
- GlobalEventHandlers 接口
- 浏览器模型
- 浏览器模型概述
- window 对象
- Navigator 对象,Screen 对象
- Cookie
- XMLHttpRequest 对象
- 同源限制
- CORS 通信
- Storage 接口
- History 对象
- Location 对象,URL 对象,URLSearchParams 对象
- ArrayBuffer 对象,Blob 对象
- File 对象,FileList 对象,FileReader 对象
- 表单,FormData 对象
- IndexedDB API
- Web Worker
- 附录:网页元素接口
- a
- img
- form
- input
- button
- option
- video,audio