JS 监听键盘事件|极客笔记

JS 监听键盘事件

在前端开发中，有时候我们会需要处理键盘事件，比如按下某个键执行特定操作，这时候就需要使用JavaScript来监听键盘事件。在本文中，我们将详细介绍如何使用JavaScript监听键盘事件，并给出一些常见的示例。

监听键盘事件

为了监听键盘事件，我们需要给网页添加一个事件监听器来响应键盘按键的操作。在JavaScript中，我们可以使用addEventListener方法来实现这一功能。

以下是一个简单的示例，演示了如何监听键盘的按下事件：

document.addEventListener('keydown', function(event) {
  console.log('键码：', event.keyCode);
});

在这段代码中，我们使用addEventListener方法来监听keydown事件，在事件处理函数中，可以获取到表示按下的键的键码，然后将这个键码打印到控制台中。

键码对照表

在JavaScript中，每个按键都有对应的键码，用来表示按下的是哪个键。以下是一些常见键的键码对照表：

Enter：13
Shift：16
Ctrl：17
Alt：18
Esc：27
空格：32

除了这些常用的键码外，还有很多其他键的键码，可以通过网上搜索找到完整的对照表。

示例：监听回车键和空格键

接下来，我们来看一个示例，演示如何监听回车键和空格键的按下事件，并在按下时执行相应的操作。

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    console.log('按下了回车键！');
    // 执行回车键的操作
  } else if (event.keyCode === 32) {
    console.log('按下了空格键！');
    // 执行空格键的操作
  }
});

在这个示例中，我们通过判断键码是否等于13或32来分别处理回车键和空格键的按下事件，当按下这两个键时，控制台将分别输出相应的信息。

示例：移动方块

接下来，我们来看一个更加复杂的示例，演示如何通过监听键盘事件来控制一个方块的移动。

HTML结构如下：

<div id="square"></div>

CSS样式如下：

#square {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript代码如下：

const square = document.getElementById('square');
let topPos = 0;
let leftPos = 0;

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 38) { // 上箭头键
    topPos -= 10;
  } else if (event.keyCode === 40) { // 下箭头键
    topPos += 10;
  } else if (event.keyCode === 37) { // 左箭头键
    leftPos -= 10;
  } else if (event.keyCode === 39) { // 右箭头键
    leftPos += 10;
  }

  square.style.top = topPos + 'px';
  square.style.left = leftPos + 'px';
});

在这个示例中，我们通过监听上、下、左、右箭头键的按下事件来控制方块的移动，按下对应键时，方块会向上、下、左、右移动。