评论区适合用事件委托，因为评论通常通过AJAX动态加载，新点赞按钮插入DOM后无需重复绑定事件；父容器统一监听点击并用event.target识别目标按钮，再通过closest()获取评论ID执行点赞逻辑。
事件委托在评论区点赞中，核心是把点击事件监听绑定到父容器（比如整个评论列表），而不是每个点赞按钮单独绑定。这样既避免动态添加评论后需重复绑定，又节省内存。
为什么评论区适合用事件委托
评论通常通过 AJAX 动态加载，新评论的点赞按钮是后来插入 DOM 的。如果给每个按钮单独写 addEventListener，新按钮不会自动拥有事件响应。事件委托让父元素统一捕获子元素的点击，天然支持后续插入的节点。
具体实现步骤
假设 HTML 结构如下：
<div id="comment-list"><div class="comment" data-id="101">
<button class="like-btn">? 2</button>
</div>
<div class="comment" data-id="102">
<button class="like-btn">? 5</button>
</div>
</div>
JavaScript 写法：
立即学习“Java免费学习笔记（深入）”；
- 给
#comment-list绑定一次click事件 - 在事件回调中，用
event.target判断是否点中了.like-btn - 向上查找最近的
.comment元素，获取其data-id作为评论 ID - 执行点赞逻辑（如发请求、更新按钮文字、加动画等）
示例代码：
commentList.addEventListener('click', function (e) {
if (e.target.classList.contains('like-btn')) {
const comment = e.target.closest('.comment');
if (comment) {
const id = comment.dataset.id;
// 发送点赞请求，更新 UI
toggleLike(id, e.target);
}
}
});
注意细节和常见问题
避免误触发：确保只响应按钮本身，而不是按钮内的文字或图标（可用 closest() 或检查 nodeName）。
状态同步：点赞后记得更新按钮文案（如 “? 3” → “❤️ 3”）和样式（如加红色），并防止重复点击（可临时禁用按钮或加防抖）。
兼容性：closest() 在 IE 中不支持，如需兼容旧浏览器，可用 polyfill 或手动向上遍历 parentNode。
扩展：支持取消点赞
可以给按钮添加状态类（如 liked），点击时判断当前是否已点过，再决定是“赞”还是“取消”。服务端也应返回当前用户是否已点赞，用于初始渲染按钮状态。
例如初始化时，后端传入 isLiked: true，前端渲染为 <button class="like-btn liked">❤️ 3</button>，JS 中据此切换逻辑。
