## 鼠标的拖拽事件 拖拽的流程: (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`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/20190101.png)