addEventListener 是绑定 keydown 事件的唯一可靠方式，因其支持多监听器共存、可控捕获/冒泡阶段，并避免覆盖或冲突；直接赋值 onkeydown 会覆盖其他监听器且无法控制事件流。
addEventListener 绑定 keydown 是唯一可靠方式
直接写 onkeydown 属性或用 document.onkeydown = handler 看似简单，但会覆盖其他脚本注册的同类型监听器，且无法控制捕获/冒泡阶段。现代页面常有多个模块独立绑定键盘逻辑（比如快捷键、表单导航、游戏控制），必须用 addEventListener。
常见错误现象：document.onkeydown = () => {} 后，另一个库注册的 keydown 完全失效；或者按住 Shift+Tab 时焦点没按预期跳转——本质是事件被提前终止或没进捕获阶段。
- 始终用
addEventListener('keydown', handler, { capture: false })，显式声明是否启用捕获（默认 false） - 如果要拦截 Tab、Enter 等默认行为（如自定义表单提交），必须在 handler 中调用
event.preventDefault() - 避免在 handler 里做重计算或 DOM 批量操作，
keydown触发频率高（尤其长按），容易卡顿
event.key 和 event.code 别混用
event.key 表示“用户想输入什么”，受键盘布局、Shift/CapsLock 状态影响；event.code 表示“物理按键位置”，固定不变。比如美式键盘按左下角 Ctrl 键，event.code 永远是 'ControlLeft'，而 event.key 在按下时是 'Control'，松开后是 'Unidentified'（实际中很少见，但规范如此）。
使用场景：做全局快捷键（Ctrl+S 保存）该用 event.ctrlKey && event.key === 's'；做游戏方向键映射（不管用户用 WASD 还是方向键）该用 event.code === 'ArrowUp' || event.code === 'KeyW'。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 判断字母/数字键优先看
event.key（它自动处理大小写） - 判断功能键（Esc、F1、Backspace）、方向键、修饰键状态，优先看
event.code或event.location - 不要依赖
event.keyCode或event.which—— 已废弃，Chrome/Firefox 新版本可能返回 0
为什么 keydown 有时不触发？检查这三处
最常见不是代码问题，而是事件没到达目标节点。浏览器只把键盘事件派发给当前 focus 的元素，如果 document 没 focus，或者某个 contenteditable 区域抢了焦点，document.addEventListener('keydown', ...) 就收不到。
典型错误现象：页面加载后按空格没反应，但点击一下空白处再按就正常了——说明初始时 document.body 没获得焦点。
- 确保目标监听节点已挂载且可 focus：对
document监听前，先执行document.body.focus()（仅限需要全局响应的场景） - 若监听的是某个
<input>，确认它没加readonly或disabled，否则不会触发keydown - 检查是否有
pointer-events: none或visibility: hidden的父容器挡住了 focus 流程
React/Vue 项目里别在 JSX 或模板里写 @keydown
框架模板语法（如 Vue 的 @keydown、React 的 onKeyDown）只绑定到组件根元素，且事件对象是合成事件（SyntheticEvent），生命周期短，不能跨帧访问。更麻烦的是：它无法监听非聚焦元素上的全局按键（比如弹窗打开时想按 Esc 关闭，但弹窗内容没 focus）。
真实需求往往是「只要页面开着，按 Esc 就关闭当前模态框」，这种必须脱离组件生命周期，直接操作原生 DOM。
- 在组件挂载后，用
useEffect(() => { document.addEventListener('keydown', handler); return () => document.removeEventListener('keydown', handler); }, [])（React） - Vue 3 Composition API 类似：在
onMounted里添加，onUnmounted里清理 - 切记清除监听器，否则组件卸载后 handler 还在内存里，引用的 state 可能导致内存泄漏
event.code 与 event.key 的语义边界——前者漏清，后者用错，都会让键盘行为在某些输入法、小键盘或非美键盘上突然失灵。 
