什么是 snabbmitt
snabbmitt 是一个基于 Snabbdom 的简单而强大的事件绑定库。它旨在提供一种快速、简单、可靠的方式来绑定 DOM 元素到事件处理程序。
与许多其他的事件绑定库不同，snabbmitt 提供了一种非常灵活的方式来声明事件绑定。例如，你可以使用 JavaScript 对象来表示事件处理函数，从而使代码更加易读和可维护。此外，snabbmitt 还提供了一种非常直观的语法，可以将事件处理函数直接指定为 DOM 元素的属性，使代码可以非常方便地分解和组合。
安装
你可以通过 NPM 来安装 snabbmitt：
npm install snabbmitt
或者通过 Yarn 来安装：
yarn add snabbmitt
使用
使用 snabbmitt 可以很容易地绑定事件处理程序。以下是一个基本的示例：
import snabbmitt from 'snabbmitt';
const myHandler = () => {
console.log('Hello, snabbmitt!');
};
const myElement = document.createElement('div');
snabbmitt(myElement, 'click', myHandler);上述示例创建了一个新的 HTML 元素，并使用 snabbmitt 按 click 事件绑定了一个事件处理函数。当单击该元素时，该代码将在控制台中输出“Hello, snabbmitt!”。
API
snabbmitt API 可以总结为三个主要部分：元素选择器、事件名称以及处理函数。下面我们将更详细地介绍这些部分的使用方法。
元素选择器
snabbmitt 元素选择器可以是一个 DOM 元素，一个选择器字符串，或者是一个带有 el 键的对象。以下是每种选择器类型的示例：
const myElement = document.createElement('div');
snabbmitt(myElement, 'click', myHandler);
// 等同于
snabbmitt('div', 'click', myHandler);
// 等同于
snabbmitt({ el: 'div' }, 'click', myHandler);事件名称
上面示例中，我们将 'click' 都作为了事件名称。实际上，snabbmitt 支持单个事件名称，以及具有白名单或黑名单的事件名称数组。
以下是单个事件名称的示例：
snabbmitt(myElement, 'click', myHandler);
以下是具有白名单的事件名称数组的示例：
import { ALLOWED_EVENTS } from 'snabbmitt';
snabbmitt(myElement, ALLOWED_EVENTS(['click', 'mousemove']), myHandler);以下是具有黑名单的事件名称数组的示例：
import { DISALLOWED_EVENTS } from 'snabbmitt';
snabbmitt(myElement, DISALLOWED_EVENTS(['focus', 'blur']), myHandler);处理函数
snabbmitt 支持三种指定处理函数的方式：
直接传入一个处理函数
snabbmitt(myElement, 'click', () => console.log('Clicked!'));使用对象方式指定处理函数
snabbmitt(myElement, { click: () => console.log('Clicked!'), dblclick: () => console.log('Double-clicked!'), });将处理函数指定为属性
myElement.onclick = () => console.log('I was clicked!'); snabbmitt(myElement, { click: 'onclick' });
总结
snabbmitt 是一个功能丰富、易于使用和高度可定制的事件绑定库。无论你是正在构建一个小型网站还是一个大型的 Web 应用程序，使用 snabbmitt 都是非常明智的选择。如果你想要深入了解 snabbmitt，那么你可以阅读官方文档，学习更多关于它的高级用法和定制选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d381e8991b448d4de2