1. 键盘事件基础：理解核心事件类型
键盘事件是前端开发中最常用的交互方式之一，掌握它们的工作原理对构建响应式网页至关重要。我们先来看最基础的三个事件类型：
keydown事件就像你按下钢琴键的瞬间。无论你按的是字母键、数字键还是功能键（如Shift或Ctrl），只要按键被按下，这个事件就会立即触发。我在实际项目中经常用它来处理即时响应，比如游戏中的角色移动：
document.addEventListener('keydown', (event) => { if (event.code === 'ArrowRight') { player.moveRight(); // 右箭头按下时移动角色 } });keyup事件则是你松开钢琴键的时刻。这个事件特别适合用来做"释放后执行"的操作，比如射击游戏中松开空格键发射子弹：
document.addEventListener('keyup', (event) => { if (event.code === 'Space') { fireBullet(); // 松开空格时发射 } });keypress事件比较特殊，它只关心能产生实际字符的按键。比如你按a键会触发，但按Ctrl键就不会。不过要注意，这个事件已经被现代标准标记为废弃，在新项目中建议用input事件替代。
这三个事件的触发顺序很关键：当你快速按下一个字母键时，浏览器会依次触发keydown → keypress → keyup。如果是长按，则会重复触发keydown和keypress，直到松开时才触发keyup。
2. 事件对象详解：key、code与keyCode的区别
键盘事件对象中有几个容易混淆的属性，我花了很长时间才完全搞懂它们的区别。先看这段代码：
document.addEventListener('keydown', (event) => { console.log(` key: ${event.key} code: ${event.code} keyCode: ${event.keyCode} `); });event.key代表的是按键的实际值，它会考虑Shift和CapsLock状态。比如：
- 按Shift+a输出"A"
- 单独按a输出"a"
- 按F1输出"F1"
event.code则代表物理按键的位置，不受Shift影响：
- 无论是否按Shift，a键都是"KeyA"
- 回车键总是"Enter"
- 数字1在字母区是"Digit1"，在小键盘区是"Numpad1"
event.keyCode是遗留属性（已废弃），返回的是Unicode值。比如a键总是65，A键也是65（因为不区分大小写）。
实际开发中我推荐使用event.code来处理快捷键，因为它不受键盘布局影响。比如"KeyA"在QWERTY键盘上是a，但在AZERTY键盘上却是q，但code值保持不变。
3. 组合键处理：Ctrl、Alt、Shift的高级用法
处理组合键是键盘事件中最实用的技能之一。比如实现Ctrl+S保存功能：
document.addEventListener('keydown', (event) => { if (event.ctrlKey && event.code === 'KeyS') { event.preventDefault(); // 阻止浏览器默认保存行为 saveDocument(); } });事件对象提供了四个修饰键状态属性：
- ctrlKey：Ctrl键是否按下
- altKey：Alt键是否按下
- shiftKey：Shift键是否按下
- metaKey：Cmd键（Mac）或Win键（Windows）
处理多键组合时要注意事件顺序。比如要实现Ctrl+Shift+K：
let ctrlPressed = false; let shiftPressed = false; document.addEventListener('keydown', (event) => { if (event.code === 'ControlLeft') ctrlPressed = true; if (event.code === 'ShiftLeft') shiftPressed = true; if (ctrlPressed && shiftPressed && event.code === 'KeyK') { openDebugTool(); } }); document.addEventListener('keyup', (event) => { if (event.code === 'ControlLeft') ctrlPressed = false; if (event.code === 'ShiftLeft') shiftPressed = false; });4. 输入法(IME)的特殊处理
处理中文输入法是个大坑，我踩过无数次。输入法组合输入时会触发一系列特殊事件：
const input = document.querySelector('input'); input.addEventListener('compositionstart', () => { console.log('开始输入中文'); }); input.addEventListener('compositionupdate', (event) => { console.log('正在输入:', event.data); }); input.addEventListener('compositionend', (event) => { console.log('输入完成:', event.data); });在输入过程中，keydown/keyup仍会触发，但event.key会显示特殊字符。可以通过event.isComposing判断：
input.addEventListener('keydown', (event) => { if (event.isComposing) { return; // 正在输入中文，跳过处理 } // 正常处理逻辑 });5. 实战应用：从快捷键到游戏控制
表单增强是键盘事件的经典应用。比如实现回车跳转到下一个输入框：
const inputs = document.querySelectorAll('input'); inputs.forEach((input, index) => { input.addEventListener('keydown', (event) => { if (event.code === 'Enter') { event.preventDefault(); const next = inputs[index + 1]; if (next) next.focus(); } }); });游戏控制需要更精细的按键管理。我通常这样实现：
const keys = {}; document.addEventListener('keydown', (event) => { keys[event.code] = true; // 防止页面滚动 if (['Space', 'ArrowUp', 'ArrowDown'].includes(event.code)) { event.preventDefault(); } }); document.addEventListener('keyup', (event) => { keys[event.code] = false; }); function gameLoop() { if (keys['ArrowLeft']) player.moveLeft(); if (keys['ArrowRight']) player.moveRight(); if (keys['Space']) player.jump(); requestAnimationFrame(gameLoop); } gameLoop();富文本编辑器需要处理更复杂的组合键：
editor.addEventListener('keydown', (event) => { if (event.ctrlKey && event.code === 'KeyB') { event.preventDefault(); toggleBold(); // 加粗文本 } // 处理Tab键缩进 if (event.code === 'Tab') { event.preventDefault(); insertTab(); } });6. 常见陷阱与最佳实践
陷阱1：事件冒泡。有些元素（如select）会阻止键盘事件冒泡，解决方案：
selectElement.addEventListener('keydown', (event) => { // 处理逻辑 event.stopPropagation(); // 明确控制冒泡行为 });陷阱2：移动端兼容性。虚拟键盘行为不一致，建议：
input.addEventListener('input', (event) => { // 更可靠的输入处理 });最佳性能实践：对于高频触发的事件（如游戏），使用防抖：
let lastKeyTime = 0; document.addEventListener('keydown', (event) => { const now = Date.now(); if (now - lastKeyTime < 16) return; // 60fps限制 lastKeyTime = now; // 处理逻辑 });无障碍访问：永远不要完全依赖键盘事件，要确保所有功能也可以通过其他方式操作。
