键盘事件

键盘事件一般发生在document的环境下！！！

keydown

:::info 键盘按键按下的事件 :::

document.onkeydown = function () {
  console.log("keydown");
};

该事件在按键一直按着的时候会连续触发。

keyup

:::info 键盘按键按下抬起的事件 :::

document.onkeyup = function () {
  console.log("keyup");
};

keypress

:::info 键盘按键按下的事件 :::

document.onkeypress = function () {
  console.log("keypress");
}

keydown和keypress都表示按键按下事件，但是他们之前存在区别。
1、当keydown和keypress事件都存在的时候，keydown会比keypress先触发。

document.onkeypress = function (event) {
  console.log("onkeypress")
};
document.onkeydown = function (event) {
   console.log("onkeydown")
};
// 例如按下字母 Q 键，结果如下：
// onkeydown
// onkeypress

2、keydown事件没有charCode属性，keypress事件有charCode属性

document.onkeydown = function (event) {
  var event = event || window.event;
  console.log(event.charCode);
};
document.onkeypress = function (event) {
  var event = event || window.event;
  console.log(event.charCode);
};
// 例如按下字母 Q 键，结果如下：
// 0 113
// 例如按下字母 A 键，结果如下：
// 0 97
// 例如按下字母 Z 键，结果如下：
// 0 122

charCode表示ASCLL表里面的字符，当按下的按键在ASCLL中不存在就会不触发keypress事件。

String.fromCharCode(Number); 该方法接收一个数字表示在ASCLL中的位置，返回该位置的字符串。

document.onkeypress = function (event) {
  var event = event || window.event;
  console.log(String.fromCharCode(event.charCode))
};
// 例如按下字母 Q 键，结果如下：
// q
// 例如按下 Shift+Q 键，结果如下：
// Q
// 例如按下 Shift 键，不会触发 keypress 事件！！！

3、keydown和keypress都有keyCode属性，而keypress中的keyCode和charCode是一样的都表示字符在ASCLL表中字符的位置！！！

document.onkeypress = function (event) {
  var event = event || window.event;
  console.log(event.keyCode);
};
document.onkeydown = function (event) {
  var event = event || window.event;
  console.log(event.keyCode);
};
// 例如按下字母 Q 键，结果如下：
// 81 113
// 例如按下字母 A 键，结果如下：
// 65 97
// 例如按下字母 Z 键，结果如下：
// 90 122
// 例如按下 Shift 键,结果如下：
// 16
// 因为按下非 ASCLL 表里的字符不会触发 keypress 事件

keyCode

在keydown事件中keyCode表示按键的键码，常见的键码如下：

案例用上下左右按键控制div进行移动：

var oDiv = document.getElementsByClassName("box")[0];
document.onkeydown = function (event) {
  var event = event || window.event,
      code = event.keyCode,
      bLeft = parseInt(window.getComputedStyle(oDiv, null).left),
      bTop = parseInt(window.getComputedStyle(oDiv, null).top);
  switch (code) {
    case 37:
      oDiv.style.left = bLeft - 5 + "px";
      break;
    case 39:
      oDiv.style.left = bLeft + 5 + "px";
      break;
    case 38:
      oDiv.style.top = bTop - 5 + "px";
      break;
    case 40:
      oDiv.style.top = bTop + 5 + "px";
      break;
  }
};