简介
onhandlers 是一个适用于前端开发的 npm 包，它提供了一种便捷的方式处理 DOM 元素的事件监听和解除事件监听。使用 onhandlers 你可以简化你的代码并避免使用原始的 addEventListener 和 removeEventListener 方法。onhandlers 是一个开源项目，代码托管在 Github 上，欢迎编辑和提交 pull request。
安装
使用 npm 安装 onhandlers：
npm install --save onhandlers
使用方法
onhandlers 将需要监听事件的元素和对应的事件处理程序进行绑定，并返回一个可识别的“键”来唯一标识当前监听器。可以使用这个键来取消监听器。
-- -------------------- ---- -------
------ - --- --- - ---- -------------
----- ------ - ---------------------------------
----- --- - ---------- -------- -- -- -
------------------------
---
----------- -------- ----- -- -------------API
on(element, event, handler, options?)
为指定元素添加事件处理程序。返回与此特定条目关联的键。
- element：DOM 元素
- event：事件名称
- handler：事件处理程序
- options：选项，与原生 addEventListener 的 options 参数相同（例如 capture, once, passive）
off(element, event, key, options?)
从指定元素中移除特定事件处理程序。必须提供键以识别要删除的处理程序。
- element：DOM 元素
- event：事件名称
- key：事件监听器的键
- options：选项，与原生 removeEventListener 的 options 参数相同（例如 capture）
示例代码
<button>点击我</button>
-- -------------------- ---- -------
------ - --- --- - ---- -------------
----- ------ - ---------------------------------
----- --- - ---------- -------- -- -- -
------------------------
---
------------- -- -
----------- -------- -----
---------------------------
-- ------在这个例子中，我们引入了 onhandlers 包，然后选择了按钮元素并添加了一个点击事件的事件监听器。我们使用键存储了事件监听器，并在 5 秒后移除了事件监听器。到达 5 秒后，我们看到“Clicked”日志不再打印。
总结
使用 onhandlers 包可以使你的事件监听器的处理逻辑更加清晰明了，并且便于代码的管理和维护。有了正确的库和工具，前端开发变得更加容易和快速。希望本文对您有帮助并让您掌握了 onhandlers 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fb03d1de16d83a67351