📅 最后修改于: 2023-12-03 15:07:40.992000 🧑 作者: Mango
在 JavaScript 中，添加事件侦听器可以监听一个元素的所有事件。按键事件是其中一种常见的事件类型。通过添加按键事件侦听器，您可以在用户按下特定按键时执行自定义代码。本文将介绍如何在 JavaScript 中添加事件侦听器按键事件。
在 JavaScript 中，您可以使用 addEventListener() 方法在元素上添加事件侦听器。此方法的语法如下：
element.addEventListener(event, function, useCapture);
event：要监听的事件类型。在这里，我们将使用 keydown 事件来监听按键事件。function：事件触发时要执行的函数。useCapture：可选参数，指定事件是否在捕获阶段进行处理。默认值为 false，即在冒泡阶段处理事件。以下是一个例子，演示如何在 <body> 元素上添加 keydown 事件侦听器：
document.body.addEventListener('keydown', function(event) {
console.log(`Key ${event.keyCode} was pressed!`);
});
该例子将在按键事件触发时输出按下的按键键码。
在事件侦听器中，您可以通过检查 event.keyCode 或 event.key 属性来获取按下的按键信息。keyCode 属性是传统的键码属性，而 key 属性是更新的枚举属性。以下是一个使用 keyCode 属性的例子：
document.body.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
console.log('Enter key was pressed!');
}
});
该例子将在用户按下 Enter 键时输出消息。
以下是一个使用 key 属性的例子：
document.body.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
console.log('Escape key was pressed!');
}
});
该例子将在用户按下 Escape 键时输出消息。
通过添加事件侦听器按键事件，您可以监听用户按下的特定按键，以执行自定义代码。在 JavaScript 中，使用 addEventListener() 方法来添加事件侦听器，然后在事件触发时检查 event.keyCode 或 event.key 属性来获取按键信息。