Web/04-JavaScript基础/30-键盘事件.md
2019-11-14 21:11:14 +08:00

84 lines
1.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 鼠标的拖拽事件
拖拽的流程:
1`onmousedown`:当鼠标在被拖拽元素上按下时,开始拖拽;
2`onmousemove`:当鼠标移动时被拖拽元素跟随鼠标移动;
3`onmouseup`:当鼠标松开时,被拖拽元素固定在当前位置。
## 鼠标的滚轮事件
`onmousewheel`:鼠标滚轮滚动的事件,会在滚轮滚动时触发。但是火狐不支持该属性。
`DOMMouseScroll`:在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。
## 键盘事件
### 事件名
`onkeydown`:按键被按下。
`onkeyup`:按键被松开。
**注意**
- 如果一直按着某一个按键不松手,那么,`onkeydown`事件会一直触发。此时,松开键盘,`onkeyup`事件会执行一次。
- 当`onkeydown`连续触发时,第一次和第二次之间会间隔稍微长一点,后续的间隔会非常快。这种设计是为了防止误操作的发生。
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。代码举例
```html
<body>
<script>
document.onkeydown = function(event) {
event = event || window.event;
console.log('qianguyihao 键盘按下了');
};
document.onkeyup = function() {
console.log('qianguyihao 键盘松开了');
};
</script>
<input type="text" />
</body>
```
### 判断哪个键盘被按下
可以通过`event`事件对象的`keyCode`来获取按键的编码。
此外,`event`事件对象还提供了以下几个属性:
- altKey
- ctrlKey
- shiftKey
上面这三个属性,可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true否则返回false。