文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇技术指南以 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 );这种「组合快捷键」能力在真实项目中非常常见文本编辑器的CtrlS保存、IDE 的CtrlShiftF全局搜索、游戏中的连招按键、应用的全局热键等本质上都是「检测一组键是否同时处于按下状态」。runOnKeys就是这个问题的一个通用、可复用的抽象。解题思路双事件监听 按键状态集合官方解答位于 2-check-sync-keydown/solution.md其核心思路只有三步但非常精炼使用两个事件处理器keydown按下和keyup释放用pressed new Set()保存当前处于按下状态的键每次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.keyrunOnKeys的调用方传入了KeyQ、KeyW这类物理键码key code而不是字符q、w。这与同章节 article.md 中对event.key与event.code的系统阐述一脉相承也是组合快捷键场景下的正确选择。两者的区别在按下ShiftZ时看得最清楚按键event.keyevent.codeZz小写KeyZShiftZZ大写KeyZevent.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!) } });即CtrlZWindows/Linux或CmdZmacOS组合。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的官方解答浓缩了组合键检测的三个要点缺一不可keydownkeyup双监听维护「当前按住的键集合」实现并发状态跟踪Set集合 全量校验实现与按下顺序无关的「组合凑齐」判定触发前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赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript 组合快捷键实战基于 keydown/keyup 与 event.code 实现 runOnKeys 多键热键JavaScript 组合快捷键实战基于 keydown/keyup 与 event.code 实现 runOnKeys 多键热键 导读 本文围绕 Moder文档/教程前端Modern JavaScript 键盘事件实战指南keydown、keyup、event.key 与 event.code 的正确取舍Modern JavaScript 键盘事件实战指南keydown、keyup、event.key 与 event.code 的正确取舍 本篇指南聚焦 Mod文档/教程前端Modern JavaScript Tutorial 实战解析用 focus 与 keydown 事件实现“键盘驱动的鼠标”移动组件Modern JavaScript Tutorial 实战解析用 focus 与 keydown 事件实现“键盘驱动的鼠标”移动组件 本篇技术指南围绕 Mod文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考