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();

代码解释:

1. waitForKeyPress() 方法:

   • 返回一个新的 Promise 对象。
   • 定义一个名为 listener 的事件监听器函数，该函数会在每次按下键盘上的键时被调用。
   • 在 listener 函数中，检查按下的键是否为 "z"。
   • 如果按下的键是 "z"，则：
     • 移除事件监听器，防止重复触发。
     • 调用 resolve() 函数，表示 Promise 已成功解析。
   • 将 listener 函数添加到 window 对象的 "keydown" 事件监听器中。

2. doStuff() 方法:

   • 使用 await 关键字等待 waitForKeyPress() 方法返回的 Promise 对象解析。
   • 当 Promise 解析后，打印 "correct key pressed" 到控制台。
   • 执行其他操作。

3. 实例化和调用:

   • 创建一个 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();

代码解释:

1. constructor() 构造函数:

   • 使用 this.doStuff = this.doStuff.bind(this) 来绑定 doStuff 方法的 this 上下文，确保在事件监听器中 this 指向类的实例。
   • 将 doStuff 方法添加到 window 对象的 "keydown" 事件监听器中。

2. doStuff() 方法:

   • 检查按下的键是否为 "z"。如果不是，则直接返回，不执行任何操作。
   • 如果按下的键是 "z"，则：
     • 移除事件监听器，防止重复触发。
     • 打印 "correct key pressed" 到控制台。
     • 执行其他操作。

注意事项:

• 必须在构造函数中使用 bind 方法来绑定 this 上下文，否则在事件监听器中 this 将指向 window 对象。
• 这种方法更适合简单的场景，如果需要更复杂的异步控制，建议使用 Promise。

总结

本文介绍了两种在 JavaScript 类中等待特定按键事件的方法。第一种方法使用 Promise 对象，允许异步地处理按键事件。第二种方法直接使用事件监听器，更加简洁。选择哪种方法取决于具体的应用场景和需求。如果需要更复杂的异步控制，建议使用 Promise。否则，直接使用事件监听器可能更简单。

好了，本文到此结束，带大家了解了《JavaScript如何监听按键事件？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！