当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript如何监听按键事件？

JavaScript如何监听按键事件？

2025-11-03 23:18:44 0浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《JavaScript 中如何等待按键事件？》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript 类中等待特定按键事件的实现方法

本文将介绍如何在 JavaScript 类中实现等待特定按键事件触发后再继续执行的功能。我们将探讨使用 Promise 和事件监听器来实现这一目标，并提供两种不同的实现方式，包括基于 Promise 的异步方法和直接使用事件监听器的方法，以便在不同的场景下灵活应用。

使用 Promise 实现按键等待

一种实现方式是使用 Promise 对象来封装按键监听过程。Promise 允许我们以异步的方式处理按键事件，并在特定按键被按下时解析（resolve）该 Promise。

以下是一个示例：

class exampleClass {
    async waitForKeyPress() {
        return new Promise((resolve) => {
            const listener = (e) => {
                if(e.key === "z") {
                    window.removeEventListener("keydown", listener);
                    resolve();
                }
            }
            window.addEventListener("keydown", listener);
        });
    }

    async doStuff() {
        await this.waitForKeyPress();
        console.log("correct key pressed");
        //do stuff
    }
}

let exampleObject = new exampleClass();
exampleObject.doStuff();

代码解释:

waitForKeyPress() 方法:
- 返回一个新的 Promise 对象。
- 定义一个名为 listener 的事件监听器函数，该函数会在每次按下键盘上的键时被调用。
- 在 listener 函数中，检查按下的键是否为 "z"。
- 如果按下的键是 "z"，则：
  - 移除事件监听器，防止重复触发。
  - 调用 resolve() 函数，表示 Promise 已成功解析。
- 将 listener 函数添加到 window 对象的 "keydown" 事件监听器中。
doStuff() 方法:
- 使用 await 关键字等待 waitForKeyPress() 方法返回的 Promise 对象解析。
- 当 Promise 解析后，打印 "correct key pressed" 到控制台。
- 执行其他操作。
实例化和调用:
- 创建一个 exampleClass 类的实例 exampleObject。
- 调用 exampleObject.doStuff() 方法，开始执行流程。

注意事项:

使用 window.removeEventListener 而不是 document.body.removeEventListener 可以确保移除的是全局的按键事件监听器。
e.key === "z" 使用严格相等运算符，确保比较的是字符串类型。

不使用 Promise 的实现方式

另一种实现方式是不使用 Promise，而是直接使用事件监听器。这种方法更简洁，但可能在某些复杂的异步场景下不如 Promise 灵活。

class exampleClass {
    constructor() {
        // the reason for this line is because "this"
        // inside doStuff will be window instead of
        // the class itself.
        this.doStuff = this.doStuff.bind(this)
        window.addEventListener("keydown", this.doStuff);
    }

    doStuff(e) {
        if(e.key !== 'z') return
        window.removeEventListener("keydown", this.doStuff)
        console.log("correct key pressed");
        //do stuff
    }
}

let exampleObject = new exampleClass();

代码解释:

constructor() 构造函数:
- 使用 this.doStuff = this.doStuff.bind(this) 来绑定 doStuff 方法的 this 上下文，确保在事件监听器中 this 指向类的实例。
- 将 doStuff 方法添加到 window 对象的 "keydown" 事件监听器中。
doStuff() 方法:
- 检查按下的键是否为 "z"。如果不是，则直接返回，不执行任何操作。
- 如果按下的键是 "z"，则：
  - 移除事件监听器，防止重复触发。
  - 打印 "correct key pressed" 到控制台。
  - 执行其他操作。

注意事项: