事件委托通过监听父容器统一处理子元素事件，适合动态添加的点赞按钮；只需给.comment-list绑定一次click事件，利用event.target.matches()和closest()精准识别被点击按钮及所属评论ID。
事件委托是通过监听父元素来统一处理子元素的事件，特别适合动态添加的评论点赞按钮——不用为每个按钮单独绑定事件，也避免重复绑定和内存泄漏。
为什么用事件委托处理点赞按钮
评论区常会动态加载新评论，如果给每个点赞按钮都用 addEventListener 绑定点击事件，不仅代码冗余，还会漏掉后续插入的按钮；而事件委托只需监听一次容器（比如 .comment-list），所有子按钮的点击都能被捕获并识别。
核心实现：监听容器 + 判断目标
关键在于利用事件对象的 event.target 找到真正被点击的元素，并确认它是否是点赞按钮（比如带有 data-action="like" 或类名 btn-like）：
- 给评论列表容器（如
<ul class="comment-list">）绑定一个click事件 - 在事件回调中检查
event.target是否匹配点赞按钮的选择器 - 用
closest()向上查找最近的评论项，从而获取当前评论的 ID 或数据
实际代码示例
假设 HTML 结构如下：
立即学习“Java免费学习笔记（深入）”；
<ul class="comment-list"><li data-comment-id="101">
<span>这条评论不错</span>
<button class="btn-like" data-action="like">? 点赞</button>
</li>
<li data-comment-id="102">
<span>同意楼上</span>
<button class="btn-like" data-action="like">? 点赞</button>
</li>
</ul>
JavaScript 写法：
document.querySelector('.comment-list').addEventListener('click', function (e) {if (e.target.matches('.btn-like')) {
const commentItem = e.target.closest('li');
const commentId = commentItem.dataset.commentId;
// 发起点赞请求或更新 UI
console.log('点赞评论:', commentId);
}
});
注意细节提升健壮性
- 使用
e.target.matches()比className.includes()更准确，支持复杂选择器 -
closest()能可靠定位所属评论项，即使按钮内部还有其他标签（比如图标嵌套）也不影响 - 可加防抖或禁用按钮状态，防止重复点击提交
- 服务端返回成功后，建议只更新对应按钮文字/样式（如变红、显示“已赞”），而非整个列表重绘
