JavaScript中的键盘事件介绍

每当用户在键盘上按下任何一个键，都会触发不同的事件。有三个键盘事件，即keydown ，keypress ，和keyup 。键盘事件属于KeyboardEvent 对象。本教程将讨论如何实现JavaScript键盘事件。

目前键盘事件最常见的用途之一是电脑游戏。大多数基于浏览器的游戏需要某种形式的键盘输入。根据键盘事件，游戏对象有不同的反应。本教程还将演示键盘事件在游戏中的使用方法。

前提条件

这篇文章适合于初级到专业的网络开发人员。但是，需要有HTML和JavaScript的知识。

JavaScript的键盘事件

在JavaScript中，有三种不同的键盘事件。

1. keydown：当按键被按下时发生，如果按键被按下很久，会自动重复发生。
2. keypress：当字母、数字或标点符号键被按下时，该事件被触发。
3. keyup：按键上升事件发生在按键被释放时。

有些浏览器不再支持keypress 事件。关于keypress 事件的浏览器兼容性细节。

要在JavaScript中记录一个keydown 事件，请使用下面的代码。

// Add event listener on keydown
document.addEventListener('keydown', (event) => {
  var name = event.key;
  var code = event.code;
  // Alert the key name and key code on keydown
  alert(`Key pressed ${name} \r\n Key code value: ${code}`);
}, false);

要在JavaScript中记录一个keypress 事件，请使用下面的代码。

// Add event listener on keypress
document.addEventListener('keypress', (event) => {
  var name = event.key;
  var code = event.code;
  // Alert the key name and key code on keydown
  alert(`Key pressed ${name} \r\n Key code value: ${code}`);
}, false);

要在JavaScript中记录一个keyup 事件，请使用下面的代码。

// Add event listener on keyup
document.addEventListener('keyup', (event) => {
  var name = event.key;
  var code = event.code;
  // Alert the key name and key code on keydown
  alert(`Key pressed ${name} \r\n Key code value: ${code}`);
}, false);

在上面的代码片段中，我们正在向文档添加addEventListener() 方法。这就把事件处理程序附在窗口上，以监听键盘事件。

键盘事件的顺序

KeyboardEvent 事件是按以下顺序触发的。

1. 第一个事件是keydown 事件。如果一个产生字符的键被进一步按住，那么该事件会被重复。
2. 如果支持keypress 事件，那么接下来就会被触发，并在按键被按下时重复。
3. 最后一个事件是keyup 事件。它是在按键被释放时触发的。

在JavaScript中处理键盘事件

Event 对象是所有事件对象的父对象。一些常用的事件对象是：TouchEvent 、KeyboardEvent 、InputEvent 、ClipboardEvent 、WheelEvent 和MouseEvent 。本教程将重点介绍KeyboardEvent 。

该事件对象有两个属性，key 和code ，它们分别允许获得字符和 "物理键码"。下表显示了event.key 和event.code 的字符v 。

钥匙	event.code	event.key
V	KeyV	v (小写)
Shift+V	KeyV	V (大写)

event.key 的值可能因语言不同而不同，而event.code 则始终相同。

我们将使用JavaScript脚本语言来获取每个键的键码值。用你喜欢的名字创建一个HTML脚本，并添加下面的JavaScript代码。在网络浏览器上打开该脚本。

<script>
  // Add event listener on keydown
  document.addEventListener('keydown', (event) => {
    var name = event.key;
    var code = event.code;
    if (name === 'Control') {
      // Do nothing.
      return;
    }
    if (event.ctrlKey) {
      alert(`Combination of ctrlKey + ${name} \n Key code Value: ${code}`);
    } else {
      alert(`Key pressed ${name} \n Key code Value: ${code}`);
    }
  }, false);
  // Add event listener on keyup
  document.addEventListener('keyup', (event) => {
    var name = event.key;
    if (name === 'Control') {
      alert('Control key released');
    }
  }, false);
</script>

Control 键是与其他键结合使用的。因此，我们需要注意，当Control 键与不同的键结合时，我们会执行不同的KeyBoard 事件。

下面的代码在任何键被按下时（keydown 事件）都会产生警报，除了Control 键。

  if (name === 'Control') {
    // Do nothing.
    return;
  }

如果在没有任何组合的情况下按下Control ，代码会监听按键事件并创建一个警报。

// Add event listener on keyup
document.addEventListener('keyup', (event) => {
  var name = event.key;
  if (name === 'Control') {
    alert('Control key released');
  }
}, false);

下面的截图显示了不同按键被按下时的代码输出。

• 控制键 (Ctrl) 释放输出

• 按键 "r"(R)的输出

• 控制键和 "d "键的组合 (Ctrl +D) 输出

键盘事件在游戏中的使用演示

键盘事件被用于游戏中，玩家可以通过一些预定义的按键来控制游戏对象。我们将创建一个游戏演示，玩家使用方向键控制游戏对象。

HTML代码

HTML代码创建一个具有矩形的SVG。

使用下面的HTML SVG代码绘制一个矩形。

  <p>Use the arrow keys to control the square object.</p>
  <svg width="500px" height="500px" class="area">
    <rect id="object1" x="10" y="10" width="20" height="20" fill="black" />
  </svg>
  <script>refreshPosition();</script>

CSS代码

现在，让我们用下面的代码对SVG的背景颜色进行造型。

  /* Change svg background color. */
  .area {
    background-color: #00FF00;
  }

JavaScript代码

然后，我们声明一些我们将在游戏中使用的变量，如下所示。

// Declare and assign variables.
let object1Size = {
  width: 20,
  height: 20
};
let position = {
  x: 10,
  y: 10
};
let moveRate = 10;
let object1 = document.getElementById("object1");

创建两个函数 (updateYPosition 和updateXPosition) 来更新对象的位置。

这些函数给出了对象的更新位置，当给定对象沿任一轴移动的距离作为参数时。

// Update y-axis position.
function updateYPosition(distance) {
  position.y = position.y - distance;
// Update y-axis position at the edge.
  if (position.y < 0) {
    position.y = 499;
  } else if (position.y > 499) {
    position.y = 0;
  }
}
// Update x-axis position.
function updateXPosition(distance) {
  position.x = position.x + distance;
  // Update x-axis position at the edge.
  if (position.x < 0) {
    position.x = 499;
  } else if (position.x > 499) {
    position.x = 0;
  }
}

函数updateYPosition() 通过从Y轴位置减去物体移动的距离来计算物体的新位置。

函数updateXPosition() ，通过增加物体从X轴位置移动的距离来计算物体的新位置。

refreshPosition() 函数将物体画到新的位置。

function refreshPosition() {
  let x = position.x - (object1Size.width/2);
  let y = position.y - (object1Size.height/2);
  let transform = "translate(" + x + " " + y + ")";

  object1.setAttribute("transform", transform);
}

addEventListener() 方法被用来给对象附加一个事件处理程序。这个事件处理程序监听按键下降事件。一旦相关的键被按下，refreshPosition() 方法就会被调用，在新的位置上绘制对象。

window.addEventListener("keydown", function(event) {
  if (event.defaultPrevented) {
    return;
  }
  if (event.code === "ArrowDown"){
      // Handle "down"
      updateYPosition(-moveRate);
  } else if (event.code === "ArrowUp"){
      // Handle "up"
      updateYPosition(moveRate);
  } else if (event.code === "ArrowLeft"){
      // Handle "left"
      updateXPosition(-moveRate);
  } else if (event.code === "ArrowRight"){
      // Handle "right"
      updateXPosition(moveRate);
  }
  refreshPosition();
  event.preventDefault();
}, true);

上面的JavaScript代码监听按键事件并调用updateXPosition() 或updateYPosition() 函数。

输出

总结

JavaScript的键盘事件有几种使用方式。本文已经展示了我们如何在游戏中使用JavaScript键盘事件。

总结一下。

• 我们了解了不同的键盘事件，以及它们是什么。
• 我们实现了键盘事件来创建一个简单的游戏。