---
title: 44-键盘事件
---
## 鼠标的拖拽事件
拖拽的流程：
（1）`onmousedown`：当鼠标在被拖拽元素上按下时，开始拖拽；
（2）`onmousemove`：当鼠标移动时被拖拽元素跟随鼠标移动；
（3）`onmouseup`：当鼠标松开时，被拖拽元素固定在当前位置。
## 鼠标的滚轮事件
`onmousewheel`：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。
`DOMMouseScroll`：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。
## 键盘事件
### 事件名
`onkeydown`：按键被按下。
`onkeyup`：按键被松开。
**注意**：
- 如果一直按着某一个按键不松手，那么，`onkeydown`事件会一直触发。此时，松开键盘，`onkeyup`事件会执行一次。
- 当`onkeydown`连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。代码举例：
```html
```
### 判断哪个键盘被按下
可以通过`event`事件对象的`keyCode`来获取按键的编码。
此外，`event`事件对象里面还提供了以下几个属性：
- altKey
- ctrlKey
- shiftKey
上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。代码举例：
```html
```
**举例**：input 文本框中，禁止输入数字。代码实现：
```html
```
## 举例：通过键盘的方向键，移动盒子
代码实现：
```html
```
上方代码，待改进的地方：
（1）移动盒子时，如果要加速，需要先按`方向键`，再按`Ctrl键`。
（2）首次移动盒子时，动作较慢。后续如果学习了定时器相关的内容，可以再改进。
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
