什么是 delegate？
delegate 是一个轻量级的JavaScript库，它允许您使用事件委托来管理多个元素的事件处理程序。事件委托是一种优化技术，它利用事件冒泡机制将事件处理程序附加到父元素而不是每个子元素。
安装和导入
在安装 delegate 之前，请确保已经安装了 Node.js 和 npm。然后可以使用以下命令安装：
npm install delegate
要使用 delegate，请将其导入到你的 JavaScript 文件中：
import delegate from 'delegate';
基本使用
要使用 delegate，首先需要选择要附加事件处理程序的父元素。这通常是文档中的 body 元素或包含所需元素的容器元素。
以下代码演示了如何使用 delegate 将 click 事件处理程序附加到所有 class 为 "button" 的元素：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ---------------
-------
------
---- ---------------
------- --------------------- ----------
------- --------------------- ----------
------- --------------------- ----------
------
------- ------------------------
-------
-------import delegate from 'delegate';
const container = document.getElementById('container');
delegate(container, '.button', 'click', function(event) {
console.log(event.target.textContent);
});在上面的代码中，delegate 函数接受三个参数：
- 事件委托的目标元素（即父元素）
- 要监听的子元素的选择器
- 要附加的事件类型
然后，您可以传递一个回调函数来处理事件。这个回调函数将被用于所有匹配的子元素。
更高级的使用
除了基本示例之外，delegate 还提供了一些更高级的功能，例如取消事件委托、更改默认选项等。
以下是一些常见的用例：
取消事件委托
有时候你会想要取消事件委托，以便单独处理某个子元素的事件。您可以使用 undelegate 方法取消委托。
-- -------------------- ---- -------
------ -------- ---- -----------
----- --------- - -------------------------------------
------------------- ---------- -------- --------------- -
--------------------------------------
-- -------------------------------------------- -
------------------------------ ---------- ---------
-------------------------------------- ---------- -
-------------------- ------ -----------
---
-
---在上面的代码中，当特殊按钮被点击时，我们取消了 .button 元素的 click 事件委托，并直接给该特殊按钮添加了事件监听器。
更改默认选项
delegate 允许您更改默认选项，以便更好地满足您的需求。以下是一个更改默认选项的示例：
-- -------------------- ---- ------- ------ -------- ---- ----------- ---------------------- ---------- -------- --------------- - -------------------------------------- -- - -------- ------ ----- ----- -------- ---- ---
在上面的代码中，除了基本的三个参数之外，我们还传递了第四个参数：选项对象。该对象包含三个选项：
capture：设置为true以使用捕获阶段（默认为false）。once：设置为true以仅触发一次事件处理程序（默认为false）。passive：设置为true以避免滚动等操作的阻止（默认为false）。
结论
delegate 是一个非常实用的库，可帮助开发人员管理多个元素
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43241