我也不知道为啥要写这篇文章，反正就是写了。事件委托这个东西， 我不敢苟同... 很多人都说好，我也觉得还行吧。

事件委托是啥

捡漏。 简单 事件委托就是把事件监听器绑定到父元素上，而不是每个子元素单独绑定。就像你家来了很多客人，你不用给每个客人单独倒茶，只需要在门口摆个茶水站就行了。

为啥要使用事件委托

啊这... 当页面中有很多可交互元素时为每个元素单独绑定事件会消耗很多内存和初始化时间。使用事件委托后 只需在共同的父容器上绑定一个事件监听器，就像给一大堆按钮都绑定了点击事件，但其实吧只绑定了一个。

集中处理逻辑使代码更清晰。比如表格中多行操作按钮， 可通过统一的data-action属性区分行为， 摆烂。 在委托处理器中使用switch判断施行对应逻辑。这样写代码的人和看代码的人都省事。

不使用事件委托的坏处

在javascript中,添加到页面上的的事件处理程序数量将直接关系到页面的整体运行性能,事件越多,性能越差。 导致原因是多方面: 1、 每绑定一个事件处理程序都需要占用一定的内存；2、访问DOM元素的次数越多，延迟就越明显；3、频繁操作DOM会导致页面重绘和回流，影响用户体验。

比方说 一个包含100个列表项的若每个都绑定click事件，会产生100个监听器；而通过事件委托，在上绑定一次即可处理所有点击。这样就减少了99个监听器，谁不喜欢少点东西呢，官宣。？

动态添加的元素也不怕

你猜怎么着？ 传统方式下动态添加的DOM元素需要重新绑定事件才能响应用户操作。而事件委托由于监听的是父级容器，新插入的子元素在触发事件时会自然冒泡到已存在的监听器，无需额外绑定。这就像你家来了新客人，不用再单独给他倒茶，他自己会走到茶水站去。

示例代码

// 获取父元素
const ul = document.querySelector;
// 在父元素上绑定事件监听器
ul.addEventListener {
  // 判断点击的是哪个子元素
  if  === 'li') {
    // 施行相应逻辑
    console.log;
  }
});

JavaScript中的事件委托利用事件冒泡机制 将事件监听器绑定到父元素上，而不是每个子元素单独绑定，从而减少内存占用和提升性能。这在数据频繁更新的场景中特别有用，避免了反复调用addEventListener.

大体上就这些。事件委托不是万能方案， 但对于高频出现、动态生成或结构稳定的元素，它确实显著提升了事件处理效率和代码可维护性。所以嘛，该用的时候还是要用一下的，闹乌龙。。