事件委托详解 从原理到实战经验帮你彻底掌握

优化前：卡得不行

项目上线后，移动端的性能问题简直让人抓狂。特别是在一些列表页面，滚动起来卡得要命，用户反馈说体验极差。我们团队也是一头雾水，不知道问题出在哪里。

找到瘼颈了！

为了找到问题所在，我试了几种方案。首先用了Chrome DevTools的Performance面板来分析，发现有大量的事件处理函数在执行，导致页面响应变慢。然后又用了一些第三方工具如Lighthouse和WebPageTest，进一步确认了问题确实是由于事件绑定过多导致的。

具体来说，我们的页面中有一个长列表，每个列表项都有点击事件。每次点击都需要触发一个事件处理函数，这在列表项数量较多时，性能问题就凸显出来了。

优化后：流畅多了

找到了问题之后，我开始着手优化。试了几种方案后，最后发现事件委托的效果最好。事件委托的核心思想是利用事件冒泡机制，在父元素上绑定一个事件处理函数，而不是在每个子元素上都绑定事件。

下面是优化前后的代码对比：

优化前的代码：

const listItems = document.querySelectorAll('.list-item');
listItems.forEach(item => {
  item.addEventListener('click', () => {
    // 处理点击事件
    console.log('Clicked on:', item.textContent);
  });
});

优化后的代码：

const listContainer = document.querySelector('.list-container');
listContainer.addEventListener('click', (event) => {
  const target = event.target;
  if (target.classList.contains('list-item')) {
    // 处理点击事件
    console.log('Clicked on:', target.textContent);
  }
});

通过事件委托，我们只需要在父元素上绑定一个事件处理函数，然后在事件处理函数中通过event.target来判断具体的点击目标。这样可以大大减少事件处理函数的数量，提升性能。

性能数据对比

优化前，页面加载时间大约在5秒左右，滚动时会有明显的卡顿。优化后，页面加载时间降到了800毫秒左右，滚动也变得非常流畅。以下是详细的性能数据对比：

• 优化前：加载时间：5s，FPS：24
• 优化后：加载时间：800ms，FPS：60

可以看到，优化后的性能有了显著提升，用户体验也得到了极大的改善。

以上是我的优化经验，有更好的方案欢迎交流

这次优化经历让我深刻体会到事件委托在性能优化中的重要性。虽然这个方案不是最优的，但确实是最简单有效的。希望我的分享能对你有所帮助，如果有更好的实现方式，欢迎在评论区交流。