按键、鼠标滚轮事件

0、KeyboardEvent

事件实例属性

按键	Key	Code	keyCode	ctrlKey
esc	Escape 27	Escape	27	false
1	1	Digit1	49	false
F1	F1	F1	112	false
左ctrl	Control	ControlLeft	17	true
左shift	Shift	ShiftLeft	16	false
右shift	Shift	ShiftRight	16	false
空格		Space	32	false
a	a	KeyA	65	false
A	A	KeyA	65	false

1、keydown 事件

1.1 简介

keydown 事件触发于键盘按键按下的时候。

document.addEventListener('keydown', e => {
  console.log(e instanceof KeyboardEvent); // true
  console.log(e.ctrlKey);
});

1.2 组合键

2个键一起

document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "c") {
        // 在这里编写要执行的代码
        console.log("Ctrl+C 被按下了。");
        // 阻止默认行为，例如防止复制
        event.preventDefault();
    }
});

// 阻止文档被复制，考虑windows和mac
document.addEventListener('keydown', e => {
  if ((e.metaKey && e.code === 'KeyC') || (e.ctrlKey && e.code === 'KeyC')) {
    e.preventDefault();
  }
});

三个键一起

document.addEventListener('keydown', e => {
  if (e.shiftKey && e.ctrlKey && e.code === 'KeyS') {
    console.log('shift+ctrl+s');
  }
});

2、keyup

keyup 事件在按键被松开时触发。

keydown 和 keyup 事件提供指出哪个键被按下的代码，而 keypress 指出哪些字符被输入。例如，小写字母“a”在 keydown 和 keyup 时会被报告为 65，但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。

从 Firefox 65 开始，keyup 和 keydown 事件在 IME 编辑时也会被触发。

IME 编辑,一些东南亚语言的第三方输入法编辑器

如果想阻止IME编辑时的keyup事件，可以这么做

eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

3、wheel

滚轮（wheel）事件会在滚动鼠标滚轮或操作其他类似输入设备时触发。

注意

备注： 不要将滚轮事件与 [scroll] 事件混淆。滚轮事件的默认行为是取决于实现的，所以不一定会触发 scroll 事件。即便如此，滚轮事件的 delta* 值也不一定能反映文档内容的实际滚动方向。因此，请不要依赖滚轮事件的 delta* 值来获得滚动方向。请通过检测目标的 scroll 事件的 [scrollLeft] 和 [scrollTop] 这两个值代替。

使用滚轮来实现缩放效果

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: powderblue;
    margin: 200px auto;
    transition: all 0.5s ease;
  }
</style>
<div class="box"></div>
<script>
  const box = document.querySelector('.box');
  let scale = 1;
  const zoomHandler = event => {
    event.stopPropagation();
    scale += event.deltaY * -0.01;
    scale = Math.min(4, Math.max(0.125, scale));
    box.style.transform = `scale(${scale})`;
  };
  box.addEventListener('wheel', zoomHandler);
</script>