企业官网建设流程全解析

• 文档/教程
• 前端

本篇技术指南以 Modern JavaScript Tutorial 仓库中「Extended hotkeys（扩展快捷键）」一节的官方解答为核心，完整剖析runOnKeys(func, code1, code2, ...)这一组合键监听函数的设计思路与逐行实现，并深入讲解event.code/event.key的选择依据、自动重复与粘滞键等边界问题。读完本文，你将能独立实现「任意多个按键同时按下触发回调」的通用工具函数，并理解其在多语言键盘布局下依然稳定工作的原理。

任务速览：runOnKeys 要解决什么问题

仓库中的任务描述位于 2-check-sync-keydown/task.md，该任务标记为 importance 5（高重要度），需求非常明确：

创建一个函数runOnKeys(func, code1, code2, ... code_n)，当键码为code1、code2、……、code_n的键同时被按下时，执行func。

任务给出的示例用法是：当 "Q" 和 "W" 同时按下时弹出alert("Hello!")（要求在任何语言环境下、无论是否开启 CapsLock 都生效）：

runOnKeys( () => alert("Hello!"), "KeyQ", "KeyW" );

这种「组合快捷键」能力在真实项目中非常常见：文本编辑器的Ctrl+S保存、IDE 的Ctrl+Shift+F全局搜索、游戏中的连招按键、应用的全局热键等，本质上都是「检测一组键是否同时处于按下状态」。runOnKeys就是这个问题的一个通用、可复用的抽象。

解题思路：双事件监听 + 按键状态集合

官方解答位于 2-check-sync-keydown/solution.md，其核心思路只有三步，但非常精炼：

1. 使用两个事件处理器：keydown（按下）和keyup（释放）；
2. 用pressed = new Set()保存当前处于按下状态的键；
3. 每次keydown时检查目标键是否全部在集合中，若全部在则执行回调函数。

第一个处理器（keydown）负责把键加入集合，第二个处理器（keyup）负责把键移除出集合。这样pressed集合始终反映「此刻哪些物理键正被按住」这一状态，而不是只记录最近一次按键事件。这是与「顺序触发」类方案的本质区别：组合键要求的是并发状态，而keydown/keyup恰好能维护这个状态。

完整实现与源码逐行解读

任务对应的可运行示例位于 solution.view/index.html，这是仓库中经过验证的最终实现，代码与官方解答完全对应：

<script> function runOnKeys(func, ...codes) { let pressed = new Set(); document.addEventListener('keydown', function(event) { pressed.add(event.code); for (let code of codes) { // 目标键是否都在集合中？ if (!pressed.has(code)) { return; } } // 是的，全部处于按下状态，触发回调 // 关键细节：触发回调前清空集合，避免"粘滞键"问题 pressed.clear(); func(); }); document.addEventListener('keyup', function(event) { pressed.delete(event.code); }); } runOnKeys( () => alert("Hello!"), "KeyQ", "KeyW" ); </script>

逐段解读这段实现：

let pressed = new Set();—— 用Set而非普通对象或数组来记录按下状态。Set天然具备「无重复成员」的语义（同一次按住过程中keydown可能多次触发，重复add不会有副作用），且has/add/delete都是 O(1) 操作，语义与性能都合适。

document.addEventListener('keydown', ...)—— 官方解答中描述为document.onkeydown/document.onkeyup，示例代码则使用addEventListener。两者效果等价，但addEventListener是推荐写法：它不会覆盖页面上其他代码注册的键盘监听器，多个监听器可以共存。

pressed.add(event.code);—— 每次按下都把当前键码加入集合。注意event.code是字符串如"KeyQ"、"KeyW"，与codes参数逐一比较。

for (let code of codes) { if (!pressed.has(code)) { return; } }—— 这是触发条件的判定：遍历所有目标键码，只要有一个不在集合中，就说明组合尚未凑齐，直接return放弃本次触发。由于keydown每次只新增一个键，这个检查在「最后一个目标键被按下的那次 keydown」中必然通过——也就是说，按下的先后顺序无关紧要，先按 Q 再按 W、或先按 W 再按 Q，效果相同。

pressed.clear();与粘滞键问题—— 这是整段实现中最容易被忽视、也最关键的细节。代码注释给出了原因：当alert()弹窗打开时，浏览器进入阻塞状态，用户即使松开按键，keyup事件也不会送达页面，pressed集合会误以为这些键仍被按住。如果不做处理，用户关闭弹窗后无需重新按键就能再次触发回调（"sticky keys"）。解决办法就是在触发前pressed.clear()清空集合：想再次触发组合键，就必须把所有键重新按一遍。这也带来一个副产品：同一次物理按住不会连续重复触发，每次触发都对应一次完整的「按下全部目标键」动作。

document.addEventListener('keyup', ...)中pressed.delete(event.code);—— 释放按键时把对应键码移除，集合恢复为空。

为什么用 event.code 而不是 event.key

runOnKeys的调用方传入了"KeyQ"、"KeyW"这类物理键码（key code），而不是字符"q"、"w"。这与同章节 article.md 中对event.key与event.code的系统阐述一脉相承，也是组合快捷键场景下的正确选择。

两者的区别在按下Shift+Z时看得最清楚：

• event.key表示按键的含义（字符），会随语言、大小写状态变化；
• event.code表示按键的物理位置，与字符无关，永远不变。

任务要求「在任何语言、无论是否开启 CapsLock 都生效」，这恰恰是event.code的强项：即使用户把系统语言从英语切换到俄语、德语，"KeyQ"对应的仍是同一个物理按键，热键逻辑不受影响。而event.key会随语言输出不同字符（例如德语布局下同一位键打出的是Y而非Z，见章节中对 QWERTY / QWERTZ 布局的讨论），用它判断组合键并不可靠。

注意大小写：键码格式是"KeyZ"而不是"keyZ"——Key的 K 必须大写，event.code == "keyZ"永远不成立。这是章节中专门标注过的常见笔误。

边界情况：自动重复、修饰键与触发频率

组合键实现还有一些与按键物理特性相关的边界需要明确：

自动重复（auto-repeat）。章节 article.md 指出：长时间按住一个键，keydown会以系统设定的频率反复触发，直到释放才产生一次keyup。对于runOnKeys而言，由于触发后立即pressed.clear()，自动重复的keydown在清空后的集合中只能凑齐部分键，不会误触发。但如果你自己实现「按住即持续执行」的逻辑（例如游戏中按住方向键持续移动），就需要用event.repeat属性过滤：event.repeat === true表示这是自动重复产生的事件，通常应忽略，只在首次按下时执行。

修饰键（Modifier）。若组合键包含Ctrl/Cmd，判断逻辑略有不同。Ctrl的event.code是"ControlLeft"或"ControlRight"，与其逐个匹配，章节中给出的更常见做法是直接读事件对象的布尔属性：

document.addEventListener('keydown', function(event) { if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) { alert('Undo!') } });

即Ctrl+Z（Windows/Linux）或Cmd+Z（macOS）组合。runOnKeys的纯code方案更适合「字母/数字/功能键」组合；涉及修饰键时，可以结合event.ctrlKey、event.shiftKey、event.altKey、event.metaKey一起判断。

触发频率。如前所述，pressed.clear()保证了「每次触发都要求完整重按一遍所有键」，因此单次按住不会造成回调风暴，这是该实现默认具备的良好行为。

配套调试工具：键盘事件测试台

仓库在同章节提供了交互式测试台 keyboard-dump.view/index.html，其逻辑在 script.js 中：在输入框聚焦后按下任意键，页面会实时输出事件的type、key、code，以及shiftKey/ctrlKey/altKey/metaKey修饰键标志和repeat重复标志，并可用复选框临时屏蔽keydown/keyup的默认行为。

这个工具对调试组合键尤其有用：你可以亲自验证"KeyQ"在按住 Shift、切换语言、开启 CapsLock 时event.code始终保持不变，也能直观看到按住不放时keydown反复触发而keyup只出现一次——这正是理解Set方案与event.repeat必要性的最佳教具。在开发自己的runOnKeys变体时，也可以先用它确认目标键的真实code值（例如方向键是"ArrowLeft"、"ArrowUp"等）。

小结：组合键检测的完整方案

回到任务本身，runOnKeys的官方解答浓缩了组合键检测的三个要点，缺一不可：

1. keydown+keyup双监听维护「当前按住的键集合」，实现并发状态跟踪；
2. Set集合 + 全量校验实现与按下顺序无关的「组合凑齐」判定；
3. 触发前pressed.clear()规避弹窗期间keyup丢失导致的粘滞键问题，同时天然限频。

配套地，选择event.code（而非event.key）让热键在任意语言与大小写状态下保持一致；理解event.repeat、修饰键布尔属性，则能让方案扩展到「按住持续执行」与Ctrl/Cmd组合等更复杂的场景。

参考资料（仓库相对路径）：

• 任务描述：2-check-sync-keydown/task.md
• 官方解答：2-check-sync-keydown/solution.md
• 完整可运行实现：solution.view/index.html
• 键盘事件章节（event.code/event.key、自动重复、默认行为）：7-keyboard-events/article.md
• 键盘事件测试台：keyboard-dump.view/index.html

• 文档/教程
• 前端