npm 包 jwerty 使用教程

阅读时长 4 分钟读完

介绍

jwerty 是一个基于 JavaScript 实现的快捷键库,可以用于处理键盘事件,支持多种浏览器。使用 jwerty 可以方便地为网页添加快捷键功能,提高用户体验。

安装

使用 npm 安装 jwerty:

或者手动下载源代码,并在 HTML 页面中引入:

基本用法

监听单个按键

上述代码表示监听组合键 ctrl+shift+a,当用户按下这三个键时,会触发回调函数并打印信息到控制台。

监听多个按键

上述代码表示监听按键 abc,当用户按下其中任意一个键时,会触发回调函数并打印信息到控制台。

监听特殊按键

-- -------------------- ---- -------
-- -- ----- -
------------------- -------- -- -
  ---------------- ------- ---------
---

-- -- --- -
----------------- -------- -- -
  ---------------- ------- -------
---

-- -----
------------------- -------- -- -
  ---------------- ------- ---------
---

上述代码表示分别监听 Enter 键、Esc 键和空格键,当用户按下对应的键时,会触发回调函数并打印信息到控制台。

取消监听

-- -------------------- ---- -------
--- -------- - -------- -- -
  ---------------- ------- - -------
--

-- -------------
--- -------- - --------------- ----------

-- ----
---------------------

上述代码表示先监听任意按键,并保存返回值 listener,然后通过 jwerty.off() 方法取消监听。

高级用法

绑定到 DOM 元素

-- -------------------- ---- -------
-- --- -------- --
-------------------------- -------- -- -
  ---------------- ------- ----- ----- --- - -- --- -------- ----------
---

-- -------
--- ------- - --------------------------------------
-------------------------- -------- -- -
  ---------------- ------- ----- ----- --- - -- --- ------- ---- -- ----------------
-- ---------

上述代码表示分别将事件绑定到 document 对象和具有 ID 为 my-element 的元素。

支持命名空间

-- -------------------- ---- -------
-------------------------------------- -------- -- -
  ---------------- ------- ----- ----- --- - -- --- ------------- -------------
---

-------------------------------------- -------- -- -
  ---------------- ------- ----- ----- --- - -- --- ------------- -------------
---

----------------------------------------- -------- -- -
  ---------------- ------- ----- ----- --- - -- --- ---------------- -------------
---

上述代码表示使用命名空间 mynamespaceothernamespace 进行事件处理,当用户按下 ctrl+shift+actrl+shift+b 时,会根据不同的命名空间触发回调函数并打印信息到控制台。

注意事项

  • jwerty.key() 方法返回一个 listener 对象,可以用于取消监听。
  • jwerty 支持动态绑定快捷键事件,可以在运行时增加或删除快捷键事件。
  • 在使用 jwerty.key() 监听多个按键时,按键之间用逗号分隔。
  • 在使用 `jwerty.key

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/35203

纠错
反馈