在前端开发过程中，我们经常需要进行 DOM 操作。如果我们需要在一个元素上绑定多个事件处理器，或者绑定的事件处理器逻辑比较复杂，使用原生的绑定事件方法可能会让代码显得非常冗杂。而 dom-delegate 可以帮助我们更好地管理事件，使代码更加简洁易读。
什么是 dom-delegate
dom-delegate 是一款基于事件代理机制的 npm 包，它可以帮助我们在一个通用的根节点上监听所有子节点的事件，并处理这些事件。在整个页面的生命周期中，我们只需要将根节点上的事件绑定一次，就可以方便地管理子节点的事件，而无需在子节点上一个个绑定事件。
安装和基础使用
首先，我们需要在项目中安装 dom-delegate:
npm install dom-delegate
在项目中引入 dom-delegate：
import Delegate from 'dom-delegate';
接下来，我们可以创建一个委托对象：
const delegate = new Delegate(document.body);
此时，我们已经成功在 body 上创建了委托对象，可以监听接下来父元素里面的所有事件，比如点击、滚动等。
为了更好地理解，这里给出一个示例：
假如我们有如下的 HTML 代码：
<div id="myDiv"> <button id="btn1">click me</button> <button id="btn2">click me too</button> </div>
我们可以通过 dom-delegate 先在 #myDiv 上绑定点击事件，并在事件处理函数中处理点击事件：
-- -------------------- ---- ------- ----- -------- - --- ------------------- -------------------- --------- --------------- - -- ---------------- --- ------- - -------------------- ---------- - ---- -- ---------------- --- ------- - -------------------- ---------- - ---展开代码
上面的事件处理函数中，用到了 event.target，它是一个事件对象的属性，指向触发事件的元素。借助 event.target，我们可以方便地识别出是哪个子元素触发了事件。
接下来，我们在浏览器中打开这个网页，点击 #btn1 和 #btn2，可以看到相应的信息打印在控制台里面。
使用场景
在实际开发中，我们可以结合 dom-delegate 的特性，编写出很多方便实用的代码。
数据统计 & 埋点
现在大多数网站在前端代码中都加入了一些数据统计或者埋点的代码，用于采集用户行为数据，进而进行优化或者分析。
一般情况下，我们需要在页面上触发一些事件，例如点击某个按钮，滚动页面到某个位置，这些事件信息都要被统计。但是如果一个页面中有很多这样的元素，我们基于绑定事件的方式会显得比较复杂。而 dom-delegate 就可以帮我们解决这个问题了。
-- -------------------- ---- ------- ----- -------- - --- ------------------------ -------------------- ---------------------- --------------- - ----- ------ - ------------- ----- --------- - ---------------------------------- ----- ----------- - ----------------------------------------- -- --------------- ----------------------- -- ----------- ------------------------- -- ------------- ---展开代码
在上面的代码片段中，我们监听了 body 上的 click 事件，并在每次触发点击时，通过 event.target 获取对应的元素上的自定义属性进行统计。
防抖优化
在实际开发中，我们经常需要为一些事件添加防抖效果，避免用户频繁操作，导致性能上的浪费。dom-delegate 也可以轻松地实现该效果。
-- -------------------- ---- ------- ----- -------- - --- ------------------- -------------------- --------- ------------------------ - ------------------- ---------- -- ------- -------- ------------ ------ - --- ----- - ----- ------ ----------------- - -------------------- ----- - ------------- -- - -------------- ------ -- ------- -- -展开代码
在上述代码片段中，我们将 button 元素上的点击事件绑定到了委托对象 #myDiv 上，并通过 debounce 函数包裹了事件处理函数，实现了防抖效果。
总结
dom-delegate 可以帮助我们更加方便地管理 DOM 事件，解决原生绑定事件方法可能出现的代码冗长或逻辑复杂的问题。除了示例中给出的两个的常用场景，它还可以应用于换肤、懒加载、图片预览等方面。
在使用之前，我们需要先了解事件代理的原理和委托对象的创建方式，之后我们就可以结合实际需要，将 dom-delegate 应用于我们的工程中。通过 dom-delegate 完成事件管理，程序代码会变得更加整洁，易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eff297b403f2923b035bc1f
