事件委托的优点

1、减少DOM操作次数：使用事件委托可以将事件监听器绑定到其父元素上，而不需要为每个子元素都绑定监听器。这样减少了DOM操作次数，提高了性能。

2、提高性能：由于减少了对每个子元素的事件监听，从而减少了内存占用和CPU消耗，进而提高了页面的响应速度和整体性能。

3、简化代码结构：通过事件委托，我们可以将事件处理逻辑集中在一个地方，使代码结构更清晰、易于维护和扩展。

4、动态新增元素也能响应事件：当我们动态添加新的元素时，无需手动为其绑定事件监听，在父元素上已经绑定的监听器将会自动处理该元素的事件。

实际例子演示

假设我们有一个评论系统，用户可以进行评论，并且可以给评论点赞或者删除。我们先创建一个评论列表的容器：

HTML

<div class="container">  <div class="comment-list" id="comment-list">    <!-- 评论列表 -->  </div></div>

添加一些简单的样式：

CSS

<style type="text/css"> .comment-list {    margin-top:1rem;    border: 1px solid #ddd;}.comment-item {    padding-left: 0.5rem;    padding-bottom: 1rem;}.comment-content {    width: 90%;    background-color: azure;    margin: 0.5rem 0;    padding: 0.5rem;    border-radius: 0.5rem;}.comment-content>p:last-child {    margin-bottom: 0;}button {    border: 1px solid #ddd;    border-radius: 0.5rem;    background-color: #fff;}</style>

接下来，我们使用JavaScript动态添加评论，并通过事件委托来处理点赞和删除操作：

const commentList = document.getElementById("comment-list");// 添加评论function addComment(comment) {  const commentItem = document.createElement("div");  commentItem.classList.add("comment-item");  commentItem.innerHTML = `    <div class="comment-content"><p>${comment.text}</p></div>    <button class="like-btn">点赞</button>    <button class="delete-btn">删除</button>  `;  commentList.appendChild(commentItem);}// 点赞处理函数function handleLike(event) {  if (event.target.classList.contains("like-btn")) {    // 处理点赞逻辑    alert("like");  }}// 删除处理函数function handleDelete(event) {  if (event.target.classList.contains("delete-btn")) {    // 处理删除逻辑    alert("del");  }}// 使用事件委托绑定监听器commentList.addEventListener("click", handleLike);commentList.addEventListener("click", handleDelete);// 模拟两项数据addComment({ text: "亲，记得给个好评哟！" });addComment({ text: "欢迎下次光临！" });

通过上述代码示例，我们可以看到如何使用事件委托，去处理评论列表中的点赞和删除操作。将点击事件委托给评论列表容器元素，我们只需要在处理函数中，判断具体点击的是哪个按钮，然后进行相应的逻辑处理。