网页中如何用 JavaScript 判断一个键是否正在被按下

在网页中使用JavaScript判断一个键是否正在被按下是一种常见需求，特别是在编写需要键盘交互的应用时。主要方法有监听键盘事件、使用event.keyCode或event.code属性判断按键标识。其中，监听键盘事件是最常见且直接的方法，它让我们能实时监测到键盘的任何操作，并作出相应的响应。

监听键盘事件 是判断按键状态的核心。当用户按下或释放键盘上的任意键时，浏览器会分别触发 keydown 和 keyup 事件。我们可以通过为这些事件添加监听器，来检测特定键的状态。例如，你可能想检测用户何时按下了“空格键”或是“Enter键”，以执行相应的操作。这种方法的优势在于它的实时性和准确性，能够精确控制按键触发的行为。

一、监听键盘事件

监听键盘事件主要涉及到keydown、keyup以及keypress事件。其中，keydown和keyup 是最常用来判断键盘按键状态的事件。

1. 利用`keydown`事件

当用户按下键盘上的任意键时，keydown事件会被触发。我们可以通过添加事件监听器来捕获这一事件，并利用事件对象来判断是哪个键被按下。

document.addEventListener('keydown', function(e) {
    if (e.code === 'Enter') {
        console.log('Enter键被按下');
    }
});

在上述代码中，我们监听了整个文档的keydown事件，当事件触发时，利用事件对象e的code属性来判断按下的是否是Enter键。e.code提供了一个更为准确的判断方式，即使在不同的语言或键盘布局下也能准确识别按键。

2. 利用`keyup`事件

同样地，当用户释放键盘上的任意键时，keyup事件会被触发。keyup事件的用法与keydown相似，但它标志着按键操作的结束。

document.addEventListener('keyup', function(e) {
    if (e.code === 'Space') {
        console.log('空格键被释放');
    }
});

二、使用`event.keyCode`或`event.code`

在处理键盘事件时，event.keyCode和event.code属性是判断按键标识的重要依据。虽然keyCode已经被废弃并不推荐使用，但它在旧的浏览器中仍然有很好的支持。

1. `event.code`

event.code表示了按键本身的物理位置，而不是字符的内容，这意味着无论用户使用何种语言的键盘，按下相同位置的键总会返回相同的code值。

document.addEventListener('keydown', function(e) {
    if (e.code === 'KeyA') {
        console.log('A键被按下');
    }
});

2. `event.keyCode`（不推荐）

尽管keyCode已时过境迁，了解它的存在对于处理遗留代码或确保向后兼容性仍然有一定的价值。

document.addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
        console.log('Enter键被按下');
    }
});

三、结合`keydown`与`keyup`实现状态跟踪

在一些应用场景中，我们需要知道某个键是否处于按下状态，而不仅仅是被按下或释放的瞬间。这就要求我们同时使用keydown和keyup事件来跟踪键盘的状态。

1. 设置标志变量

我们可以定义一个或多个变量来标记特定键的按下状态。当keydown事件触发时，我们将对应的变量设置为true；当keyup事件触发时，我们将其设置回false。

let isEnterPressed = false;
document.addEventListener('keydown', function(e) {
    if (e.code === 'Enter') {
        isEnterPressed = true;
        console.log('Enter键处于按下状态');
    }
});
document.addEventListener('keyup', function(e) {
    if (e.code === 'Enter') {
        isEnterPressed = false;
        console.log('Enter键已释放');
    }
});

2. 实现连续动作

利用上述技巧，我们可以实现按键连续触发的效果。例如，在游戏开发中，这种方法经常被用于实现角色的连续移动。

四、实践案例：游戏控制

在游戏开发中，使用键盘事件来控制游戏角色的移动是非常常见的需求。通过结合使用keydown和keyup事件，我们可以实现精细的控制逻辑。

1. 控制角色移动

当玩家按下特定的方向键时，我们可以使游戏中的角色开始移动；当释放这些按键时，角色停止移动。

let isMoving = false;
document.addEventListener('keydown', function(e) {
    if (e.code === 'ArrowRight') {
        isMoving = true;
        // 角色向右移动的代码逻辑
    }
});
document.addEventListener('keyup', function(e) {
    if (e.code === 'ArrowRight') {
        isMoving = false;
        // 停止移动的代码逻辑
    }
});

2. 实现连续攻击

类似地，我们可以利用按键状态来实现游戏角色的连续攻击动作，从而为玩家提供更为丰富的游戏体验。

let isAttacking = false;
document.addEventListener('keydown', function(e) {
    if (e.code === 'KeyZ') {
        isAttacking = true;
        // 执行攻击的代码逻辑
    }
});
document.addEventListener('keyup', function(e) {
    if (e.code === 'KeyZ') {
        isAttacking = false;
        // 停止攻击的代码逻辑
    }
});