JavaScript 按键监听112

JavaScript 的键盘事件处理程序允许您监听键盘输入并对特定的按键做出响应。这在创建交互式 web 应用程序和游戏时非常有用。## 按键事件

有三种主要类型的键盘事件：keydown、keypress 和 keyup。
keydown：当按下某个键时触发。
keypress：当按下并释放某个键以输入字符时触发。
keyup：当释放某个键时触发。

## 添加键盘事件监听程序

要添加键盘事件监听程序，可以使用 addEventListener 方法。以下示例演示了如何在文档元素上添加 keydown 监听程序：```javascript
('keydown', (event) => {
// 处理按键按下事件
});
```
## 事件对象

当触发键盘事件时，会创建 Event 对象并传递给事件处理程序。此对象包含有关按键以及有关事件的其他有用信息，例如：* key：按下的键的名称，例如 "Enter"、"Space" 或 "A"。
* code：按下的键的代码，例如 "Enter" 的 "Enter" 或 "A" 的 "KeyA"。
* shiftKey：如果按下 Shift 键，则为 true。
* ctrlKey：如果按下 Ctrl 键，则为 true。
* altKey：如果按下 Alt 键，则为 true。
## 处理特定按键

您可以使用 key 或 code 属性来处理特定按键。例如，以下示例演示如何处理按下 "Enter" 键：```javascript
('keydown', (event) => {
if ( === 'Enter') {
// 处理 "Enter" 键按下事件
}
});
```
## 预防默认行为

默认情况下，一些键会触发浏览器的默认行为。例如，按下 "Enter" 键通常会提交表单或刷新页面。要防止这种默认行为，可以使用 () 方法：```javascript
('keydown', (event) => {
if ( === 'Enter') {
();
// 处理 "Enter" 键按下事件
}
});
```
## 移除键盘事件监听程序

如果不再需要键盘事件监听程序，则应将其移除以释放资源。可以使用 removeEventListener 方法：```javascript
('keydown', (event) => {
// 处理按键按下事件
});
```
## 示例：简单的交互式游戏

以下示例演示了如何使用键盘事件创建简单的交互式游戏：```html

const canvas = ('canvas');
const ctx = ('2d');
let x = 100;
let y = 100;
('keydown', (event) => {
if ( === 'ArrowLeft') {
x -= 10;
} else if ( === 'ArrowRight') {
x += 10;
} else if ( === 'ArrowUp') {
y -= 10;
} else if ( === 'ArrowDown') {
y += 10;
}
});
function draw() {
(0, 0, , );
(x, y, 10, 10);
requestAnimationFrame(draw);
}
draw();

```