前端刷题共读之01：请解释事件委托

大家好，我是宝哥。

今天我要尝试一个新的项目→_→：前端面试手册，项目地址：

https://github.com/yangshun/front-end-interview-handbook

本文先从JavaScript篇开始，然后下一篇会讲CSS、最后是HTML，依次轮询。我会先输出项目里的答案，然后给出我自己的补充答案。

今天的题目是：请解释事件委托（event delegation）。

原项目回答

事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器。当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：

• 内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。

• 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。

参考

• https://davidwalsh.name/event-delegate

• https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation

我的补充回答

事件委托是一种 JavaScript 技术，它利用了事件冒泡的特性，将事件监听器绑定到父元素上，而不是直接绑定到目标元素上。当目标元素触发事件时，事件会冒泡到父元素，父元素上的事件监听器会捕获该事件，并通过检查事件目标来确定是否需要执行相应的操作。

优势

• 性能提升: 减少了事件监听器的数量，特别是在处理大量子元素时，可以显著提高性能。

• 动态元素处理: 可以处理动态添加的元素，因为事件监听器绑定在父元素上，而父元素始终存在。

• 代码简洁: 避免了为每个子元素都添加事件监听器，代码更加简洁易维护。

实现步骤

• 选择父元素: 确定包含所有目标元素的父元素。

• 绑定事件监听器: 在父元素上绑定事件监听器，例如 click、mouseover 等。

• 检查事件目标: 在事件处理函数中，使用 event.target 或 event.currentTarget 属性来获取触发事件的元素。

• 执行操作: 根据事件目标，判断是否需要执行相应的操作。

示例

假设您有一个列表，其中包含多个列表项，您希望点击每个列表项时都执行某个操作。使用事件委托，您可以将 click 事件监听器绑定到列表元素上，而不是每个列表项上。

HTML:

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

JavaScript:

const list = document.querySelector('ul');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    // 执行操作，例如：
    console.log('Clicked item:', event.target.textContent);
  }
});

在这个例子中，当点击任何列表项时，click 事件会冒泡到 ul 元素，事件处理函数会检查事件目标是否是 LI 元素，如果是，则执行相应的操作。

总结

事件委托是一种强大的技术，可以提高性能、简化代码并处理动态元素。当您需要处理大量元素或动态添加元素时，请考虑使用事件委托。

最后

如果你觉得宝哥今天的尝试对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

以后我也会多尝试共读其它项目，如果看到喜欢的项目也可以留言告诉我，今天的教程你学会了吗？学会了，就在评论区刷一个，学会了。

欢迎长按图片加好友，宝哥会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给 宝哥 点一个 赞 或者 分享 都是对我的支持

关注公众号后，在首页：

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书