JavaScript绑定键盘事件的多种写法

使用JavaScript来绑定键盘事件时，有多种写法，而他们的实现效果实际上是等价的，下面一一来列举。

方式一：

function keyboard() {
  document.onkeydown = function() {
    let keycode = event.keyCode;
    if (keycode == 32) {
      alert("空格键被按下了");
    }
  }
}
keyboard();

随后我们执行这个函数，就可以实现键盘事件绑定。

代码中的event是一个对象，如果你打印event的话，会返回[object KeyboardEvent]。

在事件发生时，浏览器会创建一个event对象，所有相关信息会收集并存储在该对象中。这些对象包含一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。

在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管以哪种方式指定事件处理程序，都会传入这个event对象。

event对象的keyCode属性会保存一个键码，对应键盘上特定一个键。方式一种的32，对应就是键盘中的空格键。

document.onkeydown来对用户敲击键盘事件进行监听，它需要绑定一个具体执行函数。比如方式一中的function函数，当键盘被按下时进行具体执行。但是代码这样写，理解起来不太直观，我们使用方式二来实现一下同样的功能。

方式二：

function keyboard(event) {
  let keycode = event.keyCode;
  if (keycode == 32) {
    alert("空格键被按下了")
  }
}

//参数1：表示事件，keydown:键盘向下按；参数2：表示触发的事件处理函数
document.addEventListener("keydown", keyboard);

方式二实现的功能和方式一完全一样，但写成事件监听的方式理解起来要更为容易。

参考资料

[1] 《JavaScript高级程序设计（第四版）》
[2] 浏览器事件简介
[3] onkeydown 事件