键盘事件与keycode属性：掌握JS键盘输入控制，打造灵动交互体验

前端

2023-11-17 17:29:05

键盘事件的奥秘：按下、释放与按键

在JavaScript中，有三个常用的键盘事件：keydown、keyup和keypress。它们分别对应着键盘按下、释放和按住期间产生的事件。

keydown ：当用户按下键盘上的某个键时，就会触发keydown事件。例如，当用户按下字母“A”键时，就会触发keydown事件，我们可以通过event.key属性来获取被按下的键。
keyup ：当用户松开键盘上的某个键时，就会触发keyup事件。与keydown事件类似，我们可以通过event.key属性来获取被松开的键。
keypress ：当用户按住键盘上的某个键时，就会触发keypress事件。与keydown和keyup事件不同，keypress事件只会触发一次，不会随着用户按住键的时间而重复触发。

keyCode属性：键盘输入的数字标识

keyCode属性是键盘事件的一个重要属性，它为每个键盘键分配了一个唯一的数字代码。我们可以通过event.keyCode属性来获取被按下的键的keyCode。

例如，当用户按下字母“A”键时，event.keyCode的值为65。当用户按下数字“1”键时，event.keyCode的值为49。

实战演练：巧用键盘事件与keyCode属性

现在，我们已经了解了键盘事件与keyCode属性的基本知识，让我们通过几个实例来演示如何使用它们来构建灵动而强大的键盘交互体验。

实例1：禁用退格键

有时候，我们希望禁用键盘上的退格键，以防止用户意外删除文本。我们可以使用keydown事件来实现这一点。

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 8) {
    event.preventDefault();
  }
});

这段代码会监听键盘上的keydown事件。当用户按下退格键时，event.keyCode的值为8，于是我们阻止了默认的行为（即删除文本）。

实例2：检测特殊按键

我们可以使用键盘事件来检测用户是否按下了某些特殊按键，例如Ctrl键、Shift键或Alt键。

document.addEventListener("keydown", function(event) {
  if (event.ctrlKey) {
    console.log("Ctrl键被按下了");
  } else if (event.shiftKey) {
    console.log("Shift键被按下了");
  } else if (event.altKey) {
    console.log("Alt键被按下了");
  }
});

这段代码会监听键盘上的keydown事件。当用户按下Ctrl键、Shift键或Alt键时，我们分别输出相应的日志信息。

实例3：构建键盘控制的游戏

我们可以使用键盘事件来构建键盘控制的游戏。例如，我们可以创建一个简单的贪吃蛇游戏，用键盘上的方向键来控制贪吃蛇的移动。

// 创建键盘事件监听器
document.addEventListener("keydown", function(event) {
  // 根据按下的键，改变贪吃蛇的移动方向
  switch (event.keyCode) {
    case 37: // 左箭头
      snake.direction = "left";
      break;
    case 38: // 上箭头
      snake.direction = "up";
      break;
    case 39: // 右箭头
      snake.direction = "right";
      break;
    case 40: // 下箭头
      snake.direction = "down";
      break;
  }
});

// 创建贪吃蛇对象
const snake = {
  direction: "right", // 初始方向为向右
  body: [], // 蛇的身体，由多个方块组成
  move() {
    // 根据当前方向，移动贪吃蛇的身体
    switch (this.direction) {
      case "left":
        this.body.unshift({ x: this.body[0].x - 1, y: this.body[0].y });
        break;
      case "up":
        this.body.unshift({ x: this.body[0].x, y: this.body[0].y - 1 });
        break;
      case "right":
        this.body.unshift({ x: this.body[0].x + 1, y: this.body[0].y });
        break;
      case "down":
        this.body.unshift({ x: this.body[0].x, y: this.body[0].y + 1 });
        break;
    }
  },
};