HumanInput键盘事件完全指南on/once/off、组合键与preventDefault一次讲透【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInputHumanInput 是一个处理键盘快捷键与人类输入事件的轻量级 JavaScript 库。本文将带你用 on、once、off 三大核心 API彻底搞懂键盘事件的注册与移除、ctrl-s这类组合键的写法以及如何用 preventDefault 阻止浏览器默认行为——新手 10 分钟即可上手。为什么需要一个键盘事件库用原生 JavaScript 处理键盘事件相当繁琐要逐个判断修饰键状态、处理按键重复、还得照顾不同键盘布局。而 HumanInput 把这些全部压缩成一行字符串语法var HI new HumanInput(window); HI.on(ctrl-s, function(event) { HI.log.info(保存快捷键被触发了); });它零依赖、gzip 后仅约 8.1kb支持 Chrome、Firefox、Safari、Opera 甚至 IE。完整 API 文档见 README.rst。快速上手3步监听键盘快捷键引入库直接使用开箱即用的构建文件 humaninput-latest.js压缩版 humaninput-latest.min.js创建实例new HumanInput(window)建议绑定到 window一个实例即可监听整个页面注册事件用HI.on()传入a、ctrl-s、ctrl-a n这样的字符串 调试时先传设置{logLevel: DEBUG}创建实例控制台会打印每个被触发的事件详情——这是排错的第一步。精通 on/once/off注册与移除事件回调事件注册逻辑集中在 EventHandler 类中三个方法的实现都在 lib/events.js。on灵活的注册方式签名为on(event, callback, context, times)HI.on(ctrl-a, doSelectAll); // 单个事件 HI.on([ctrl-a, ctrl-shift-a], doSomething); // 多个事件绑定同一函数 HI.on(enter, doSubmit, myObj); // 绑定 contextthis 指向 myObj HI.on(faceplant, wakeUp, someContext, 5); // 只触发 5 次后自动移除需要了解的几个隐藏规则顺序无所谓ctrl-shift-a、shift-ctrl-a、a-shift-ctrl完全等价注册前会自动归一化排序见 normCombo大写自动补 shiftHI.on(A, fn)等价于shift-a内置别名konami即经典魂斗罗密码、anykey即任意按键完整列表见 aliases也可通过HI.aliases自定义once只触发一次的事件once(event, callback, context)是on(event, callback, context, 1)的快捷方式回调执行一次后自动移除非常适合「用户按回车后只弹一次新手引导」这类场景。实现只有一行见 once()。off精准移除监听off()支持 4 级精准度调用形式效果off()移除所有事件监听off(ctrl-s)移除该事件的全部回调off(ctrl-s, fn)只移除指定的回调函数off(ctrl-s, fn, ctx)只移除函数与 context 都匹配的回调触发机制在 trigger()每次事件命中后times减一减到 0 时自动调用off()清理——这正是once的底层原理。组合键语法详解任何事件都能当修饰键组合键是 HumanInput 最强大的特性任意事件都能作为修饰键键盘与鼠标事件也能混搭。四种事件类型速查类型语法示例单键aHI.on(a, fn)组合键ctrl-sHI.on(ctrl-s, fn)有序组合键a-s-dHI.on(f-d-s, fn)必须按此顺序按键按键序列空格分隔HI.on(konami, fn)触发魂斗罗密码修饰键别名体系四大修饰键都有多种等价写法优先级定义在 MODPRIORITYctrlcontrolshift⇧altoption⌥osmetawincmdcommand⌘因此⌘-ç与os-ç完全等价HumanInput 也能自然支持非美式键盘布局——巴西用户按下ç时HI.on(ç, fn)会正常触发。两个必须知道的小细节区分按键位置HI.on(keydown:shiftleft, fn)只监听左 Shift空格键是例外因为空格用于分隔按键序列空格键必须写成space如alt-spacepreventDefault 两种写法阻止浏览器默认行为想让ctrl-b不再打开书签、ctrl-s不再弹出保存框有两种方式方式一return false最简洁HI.on(ctrl-b, function(event) { HI.log.info(禁止加入书签); return false; // 库会自动调用 event.preventDefault() });原理trigger() 收集所有回调的返回值后只要任意一个为falsehandlePreventDefault 就会调用e.preventDefault()。方式二自己调用浏览器原生事件始终作为回调的第一个参数传入直接写event.preventDefault()同样有效。⚠️ 特别注意处理pan拖动平移事件时必须return false或调用preventDefault()否则拖拽过程中浏览器会持续滚动或选中文字完整示例见 README.rst 的 pan 章节。实战速查表常见场景一步到位场景写法全局保存快捷键HI.on(ctrl-s, save)并return false回车只弹一次引导HI.once(enter, showGuide)只监听左 ShiftHI.on(keydown:shiftleft, paddle)页面卸载时清空监听HI.off()临时暂停/恢复事件HI.pause()/HI.resume()实时判断按键状态HI.isDown(shift-a)只绑定特定元素HI.on(click:#someelement, fn)调试技巧与源码导航事件不触发时按这两步排查打开 DEBUG 日志在控制台查找triggering: xxx——有说明注册字符串拼写有误没有说明被filter()过滤了默认在输入框聚焦时忽略键盘事件验证 filter 行为设置HI.filter function(e) { return true; }禁用过滤后再试想深入内部实现重点阅读这几个源文件lib/events.json/once/off/trigger核心实现lib/utils.js组合键归一化、序列缓冲与 preventDefault 处理lib/constants.js修饰键别名与排序优先级lib/humaninput.js主入口、事件监听与按键状态跟踪tests/keyboard.js键盘事件测试用例是最好的语法参考总结HumanInput 用「字符串语法 自动归一化」把键盘事件的复杂性压缩成三个简单 APIon注册、once一次性、off移除再配合return false拦截默认行为10 分钟即可掌握。从键盘快捷键到按键序列、鼠标手势乃至手柄事件它都能胜任——现在就打开 完整文档 和 humaninput-latest.js 动手试试吧。【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInput创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
HumanInput键盘事件完全指南：on/once/off、组合键与preventDefault一次讲透
HumanInput键盘事件完全指南on/once/off、组合键与preventDefault一次讲透【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInputHumanInput 是一个处理键盘快捷键与人类输入事件的轻量级 JavaScript 库。本文将带你用 on、once、off 三大核心 API彻底搞懂键盘事件的注册与移除、ctrl-s这类组合键的写法以及如何用 preventDefault 阻止浏览器默认行为——新手 10 分钟即可上手。为什么需要一个键盘事件库用原生 JavaScript 处理键盘事件相当繁琐要逐个判断修饰键状态、处理按键重复、还得照顾不同键盘布局。而 HumanInput 把这些全部压缩成一行字符串语法var HI new HumanInput(window); HI.on(ctrl-s, function(event) { HI.log.info(保存快捷键被触发了); });它零依赖、gzip 后仅约 8.1kb支持 Chrome、Firefox、Safari、Opera 甚至 IE。完整 API 文档见 README.rst。快速上手3步监听键盘快捷键引入库直接使用开箱即用的构建文件 humaninput-latest.js压缩版 humaninput-latest.min.js创建实例new HumanInput(window)建议绑定到 window一个实例即可监听整个页面注册事件用HI.on()传入a、ctrl-s、ctrl-a n这样的字符串 调试时先传设置{logLevel: DEBUG}创建实例控制台会打印每个被触发的事件详情——这是排错的第一步。精通 on/once/off注册与移除事件回调事件注册逻辑集中在 EventHandler 类中三个方法的实现都在 lib/events.js。on灵活的注册方式签名为on(event, callback, context, times)HI.on(ctrl-a, doSelectAll); // 单个事件 HI.on([ctrl-a, ctrl-shift-a], doSomething); // 多个事件绑定同一函数 HI.on(enter, doSubmit, myObj); // 绑定 contextthis 指向 myObj HI.on(faceplant, wakeUp, someContext, 5); // 只触发 5 次后自动移除需要了解的几个隐藏规则顺序无所谓ctrl-shift-a、shift-ctrl-a、a-shift-ctrl完全等价注册前会自动归一化排序见 normCombo大写自动补 shiftHI.on(A, fn)等价于shift-a内置别名konami即经典魂斗罗密码、anykey即任意按键完整列表见 aliases也可通过HI.aliases自定义once只触发一次的事件once(event, callback, context)是on(event, callback, context, 1)的快捷方式回调执行一次后自动移除非常适合「用户按回车后只弹一次新手引导」这类场景。实现只有一行见 once()。off精准移除监听off()支持 4 级精准度调用形式效果off()移除所有事件监听off(ctrl-s)移除该事件的全部回调off(ctrl-s, fn)只移除指定的回调函数off(ctrl-s, fn, ctx)只移除函数与 context 都匹配的回调触发机制在 trigger()每次事件命中后times减一减到 0 时自动调用off()清理——这正是once的底层原理。组合键语法详解任何事件都能当修饰键组合键是 HumanInput 最强大的特性任意事件都能作为修饰键键盘与鼠标事件也能混搭。四种事件类型速查类型语法示例单键aHI.on(a, fn)组合键ctrl-sHI.on(ctrl-s, fn)有序组合键a-s-dHI.on(f-d-s, fn)必须按此顺序按键按键序列空格分隔HI.on(konami, fn)触发魂斗罗密码修饰键别名体系四大修饰键都有多种等价写法优先级定义在 MODPRIORITYctrlcontrolshift⇧altoption⌥osmetawincmdcommand⌘因此⌘-ç与os-ç完全等价HumanInput 也能自然支持非美式键盘布局——巴西用户按下ç时HI.on(ç, fn)会正常触发。两个必须知道的小细节区分按键位置HI.on(keydown:shiftleft, fn)只监听左 Shift空格键是例外因为空格用于分隔按键序列空格键必须写成space如alt-spacepreventDefault 两种写法阻止浏览器默认行为想让ctrl-b不再打开书签、ctrl-s不再弹出保存框有两种方式方式一return false最简洁HI.on(ctrl-b, function(event) { HI.log.info(禁止加入书签); return false; // 库会自动调用 event.preventDefault() });原理trigger() 收集所有回调的返回值后只要任意一个为falsehandlePreventDefault 就会调用e.preventDefault()。方式二自己调用浏览器原生事件始终作为回调的第一个参数传入直接写event.preventDefault()同样有效。⚠️ 特别注意处理pan拖动平移事件时必须return false或调用preventDefault()否则拖拽过程中浏览器会持续滚动或选中文字完整示例见 README.rst 的 pan 章节。实战速查表常见场景一步到位场景写法全局保存快捷键HI.on(ctrl-s, save)并return false回车只弹一次引导HI.once(enter, showGuide)只监听左 ShiftHI.on(keydown:shiftleft, paddle)页面卸载时清空监听HI.off()临时暂停/恢复事件HI.pause()/HI.resume()实时判断按键状态HI.isDown(shift-a)只绑定特定元素HI.on(click:#someelement, fn)调试技巧与源码导航事件不触发时按这两步排查打开 DEBUG 日志在控制台查找triggering: xxx——有说明注册字符串拼写有误没有说明被filter()过滤了默认在输入框聚焦时忽略键盘事件验证 filter 行为设置HI.filter function(e) { return true; }禁用过滤后再试想深入内部实现重点阅读这几个源文件lib/events.json/once/off/trigger核心实现lib/utils.js组合键归一化、序列缓冲与 preventDefault 处理lib/constants.js修饰键别名与排序优先级lib/humaninput.js主入口、事件监听与按键状态跟踪tests/keyboard.js键盘事件测试用例是最好的语法参考总结HumanInput 用「字符串语法 自动归一化」把键盘事件的复杂性压缩成三个简单 APIon注册、once一次性、off移除再配合return false拦截默认行为10 分钟即可掌握。从键盘快捷键到按键序列、鼠标手势乃至手柄事件它都能胜任——现在就打开 完整文档 和 humaninput-latest.js 动手试试吧。【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInput创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考