JavaScript中如何监听键盘按键事件

在Web开发中，键盘事件监听是实现快捷键、表单交互、游戏控制等功能的常见需求。JavaScript提供了原生的键盘事件接口，我们可以通过监听这些事件来捕获用户的键盘操作，进而执行对应的业务逻辑。

常见的键盘事件类型

JavaScript中常用的键盘事件有三种，分别对应按键操作的不同阶段：

• keydown：当用户按下键盘上的任意键时触发，如果按住不放会持续触发该事件，是监听按键最常用的事件类型。
• keyup：当用户释放按下的键时触发，只会触发一次，适合监听按键结束的动作。
• keypress：当用户按下会产生字符的键时触发（比如字母、数字、符号键），功能键（如Ctrl、Shift、方向键）不会触发该事件，目前该事件已逐渐被废弃，不推荐使用。

事件监听的基本实现

我们可以通过addEventListener方法为指定DOM元素绑定键盘事件，通常监听整个页面的键盘事件时，会绑定到document对象上。下面是一个最基础的监听示例，会在控制台输出用户按下的键的相关信息：

// 监听document的keydown事件
document.addEventListener('keydown', function(event) {
  // event对象包含按键的相关信息
  console.log('按下的键:', event.key);
  console.log('键的键码:', event.keyCode); // 注意：keyCode已废弃，不推荐使用
  console.log('是否按下了Ctrl键:', event.ctrlKey);
  console.log('是否按下了Shift键:', event.shiftKey);
  console.log('是否按下了Alt键:', event.altKey);
});

上面的代码中，回调函数接收的event是键盘事件对象，里面包含了本次按键的所有相关信息。其中event.key是最推荐的属性，它返回按键对应的字符串，比如按下字母A会返回"A"，按下Enter键会返回"Enter"，比已废弃的keyCode属性更直观可靠。

判断特定按键的实现

实际开发中我们往往需要判断用户是否按下了某个特定的按键，比如监听Enter键提交表单，或者监听Ctrl+S组合键保存内容。下面是几个常见的场景示例：

监听单个按键

下面的代码会监听Enter键的按下事件，当用户按下Enter时弹出提示：

document.addEventListener('keydown', function(event) {
  // 判断按下的键是否为Enter
  if (event.key === 'Enter') {
    alert('你按下了Enter键');
  }
});

监听组合键

组合键的判断需要同时检查event.key和修饰键的状态，比如下面的代码监听Ctrl+S组合键，按下时会阻止浏览器默认的保存行为，执行自定义逻辑：

document.addEventListener('keydown', function(event) {
  // 判断是否同时按下了Ctrl键和S键
  if (event.ctrlKey && event.key === 's') {
    // 阻止浏览器默认的保存页面行为
    event.preventDefault();
    console.log('触发了Ctrl+S组合键，执行自定义保存逻辑');
    // 这里可以写实际的保存相关代码
  }
});

如果需要监听其他组合键，只需要调整对应的修饰键判断即可，比如event.shiftKey对应Shift键，event.altKey对应Alt键。

注意事项

• 如果监听的是某个具体输入框的键盘事件，可以把事件绑定到对应的<input>或者<textarea>元素上，此时只有该元素获得焦点时才会触发事件。
• 使用event.preventDefault()可以阻止按键的默认行为，比如输入框按下Enter默认会换行，或者浏览器按下Ctrl+S默认会弹出保存弹窗，都可以用这个方法阻止。
• 不同浏览器的按键返回值可能存在细微差异，但event.key属性在现代浏览器中已经得到了很好的兼容，优先使用该属性判断按键即可。

JavaScript键盘事件keydown监听组合键实现event_key用法前端交互 本作品最后修改时间：2026-05-23 23:11:09