前言
在前端开发中，我们经常需要对某些元素进行事件的触发，比如：鼠标点击事件、键盘按键事件等等。此时，如果我们一个个去绑定事件函数，会显得十分繁琐而且容易出错。而通过使用 @apatheticwes/trigger 这个 npm 包，我们可以很方便地管理并触发事件。
安装
使用 npm 安装 @apatheticwes/trigger：
npm install @apatheticwes/trigger --save
或者使用 yarn 安装：
yarn add @apatheticwes/trigger
使用方法
在需要使用 @apatheticwes/trigger 的文件中，引入该包：
import Trigger from '@apatheticwes/trigger';
给元素绑定事件
使用 trigger.on 方法对元素进行事件绑定：
const el = document.querySelector('button');
Trigger.on(el, 'click', (e) => {
console.log(e.target);
});以上代码为 button 元素绑定了 click 事件，并在事件发生时输出事件触发的目标元素。
触发元素事件
可以使用 trigger.fire 方法来触发元素事件：
const el = document.querySelector('button');
Trigger.fire(el, 'click');以上代码给 button 元素手动触发了 click 事件。
取消事件绑定
使用 trigger.off 方法来取消元素的事件绑定：
const el = document.querySelector('button');
const handler = (e) => {
console.log(e.target);
};
Trigger.on(el, 'click', handler);
// 假如需要取消事件绑定，则：
Trigger.off(el, 'click', handler);以上代码为 button 元素绑定了 click 事件，并在事件发生时输出事件触发的目标元素。在需要取消事件绑定时，传入对应的元素、事件名称和事件处理函数。
示例代码
<button id="btn">Click me</button>
-- -------------------- ---- ------- ------ ------- ---- ------------------------ ----- --- - ------------------------------- -- -- ----- -- --------------- -------- --- -- - ------------------- ---------- --- -- -- ----- -- ----------------- --------- -- ------ ----- ------- - --- -- - ---------------------- -- --------------- -------- --------- ---------------- -------- ---------
总结
@apatheticwes/trigger 提供了一种方便、简单的方法来处理元素的事件，使得我们可以更加专注于业务逻辑的实现。同时，由于该 npm 包的简洁易用，可以让我们更加容易地管理复杂的事件交互，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/148375