鼠标事件
最后更新于：2022-04-02 03:26:20
[TOC]
## 鼠标事件
### 属性
#### 监听功能键
* `altKey`属性：Alt 键
* `ctrlKey`属性：Ctrl 键
* `metaKey`属性：Meta 键（Mac 键盘是一个四瓣的小花，Windows 键盘是 Windows 键）
* `shiftKey`属性：Shift 键
```
// html
// js
function showKey(e) {
console.log('ALT key pressed: ' + e.altKey);
console.log('CTRL key pressed: ' + e.ctrlKey);
console.log('META key pressed: ' + e.metaKey);
console.log('SHIFT key pressed: ' + e.shiftKey);
}
```
#### MouseEvent.button，MouseEvent.buttons 监听鼠标按钮类型
```
// html
// js
var whichButton = function (e) {
switch (e.button) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + e.button);
}
}
```
MouseEvent.button:
* 0：按下主键（通常是左键），或者该事件没有初始化这个属性（比如`mousemove`事件）。
* 1：按下辅助键（通常是中键或者滚轮键）。
* 2：按下次键（通常是右键）。
MouseEvent.buttons: 表示同时按下的那个键
* 1：二进制为`001`（十进制的1），表示按下左键。
* 2：二进制为`010`（十进制的2），表示按下右键。
* 4：二进制为`100`（十进制的4），表示按下中键或滚轮键。
### 实例方法
#### MouseEvent.getModifierState() 检测特定案件
返回一个布尔值，有没有按下特定的功能键。它的参数是一个表示 [功能键](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#Modifier_keys_on_Gecko)的字符串。
```
document.addEventListener('click', function (e) {
console.log(e.getModifierState('CapsLock'));
}, false);
```
## WheelEvent 滚轮接口
`var wheelEvent = new WheelEvent('wheel', options);
`
第一参数只能是 `wheel`
* `deltaX`：数值，表示滚轮的水平滚动量，默认值是 0.0。
* `deltaY`：数值，表示滚轮的垂直滚动量，默认值是 0.0。
* `deltaZ`：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0。
* `deltaMode`：数值，表示相关的滚动事件的单位，适用于上面三个属性。`0`表示滚动单位为像素，`1`表示单位为行，`2`表示单位为页，默认为`0`。
*
```
document.querySelector('body').addEventListener('wheel',function (e) {
console.log(e);
console.log(e.deltaX);
console.log(e.deltaY);
console.log(e.deltaZ);
console.log(e.deltaMode);
})
```
';