JavaScript:掌握键盘事件处理

1.4K 0 0

在构建网站时，开发者通常期望用户能以各种方式与其交互，如滚动、填写表单、点击链接或使用快捷键。作为开发人员，捕捉并响应这些交互至关重要。在此教程中，我们将重点关注JavaScript中的键盘事件处理。

键盘事件主要分为三类：keydown、keypress（已废弃）和keyup。keydown事件在任何键被按下时触发，无论该键是否产生字符。keypress仅在按下的键会产生字符值时触发，比如字母键，而非Alt这样的非字符键。keyup事件则在用户释放按键时发生。

监听键盘事件时，要注意的是，键盘是用来获取用户输入的设备，但并非所有输入都来自键盘。例如，表单填写可能更适合使用change事件。此外，键盘事件仅对可聚焦元素有效，如输入框或按钮。不过，可以通过在文档级别添加事件监听器来捕获键盘事件，即使对于不可聚焦的元素如段落。

下面是一个简单的事件监听示例：

“`javascript
document.addEventListener(‘keydown’, keyIsDown);
function keyIsDown(event) {
// 执行相关操作
}
“`
回调函数中的event对象提供了关于事件的详细信息，如：

– `key`: 返回按键的字符值。
– `code`: 返回按键的物理编码，不受字符集影响。
– `repeat`: 如果按键被长按时，此属性为true。
– `altKey`, `ctrlKey`, `metaKey`, `shiftKey`: 分别表示Alt、Ctrl、Meta（在Mac上类似Command）和Shift键的状态。

在实际应用中，你可以根据这些属性响应不同的键盘事件。例如，下面的代码演示了如何响应R、B键以及上箭头键：

“`javascript
const circle = document.querySelector(‘.circle’);
document.addEventListener(‘keydown’, (event) => {
if (event.code === ‘KeyR’ && !event.repeat) {
// 更改圆的大小
}
if (event.key === ‘B’ && event.shiftKey) {
// 设置边框
}
if (event.code === ‘ArrowUp’ && !event.repeat) {
// 添加动画
}
});
document.addEventListener(‘keyup’, (event) => {
if (event.code === ‘ArrowUp’) {
// 移除动画
}
});
“`