JavaScript 中怎么用事件委托实现评论区点赞功能-js教程-PHP中文网

用事件委托实现评论区点赞功能，核心是将点击事件绑定在评论列表容器上而非每个按钮，以节省内存并支持动态添加的评论；利用事件冒泡捕获子元素点击，通过data-id识别评论id，用closest和queryselector获取目标元素并更新ui。

javascript 中怎么用事件委托实现评论区点赞功能

用事件委托实现评论区点赞功能，核心是把点击事件绑定在评论列表容器上，而不是每个点赞按钮单独绑定，这样既节省内存，又支持动态添加的评论。

为什么用事件委托？

评论区常会动态加载新评论（比如翻页、回复后插入），如果给每个点赞按钮都绑一次 click 事件，新按钮不会自动有响应；而事件委托只需绑定一次，利用事件冒泡机制捕获子元素触发的点击，天然支持后续新增的 DOM 节点。

HTML 结构要带明确标识

每个点赞按钮需有统一特征（如 class）和可识别的数据标识，推荐用 data-id 记录对应评论 ID：

<div id="comment-list">
  <div class="comment" data-id="101">
    <p>这讲得真清楚！</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0"><img
														src="https://img.php.cn/upload/manual/001/431/639/6ad9ce71d8cb6379.png" alt="Gradle 9.8.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0" class="overflowclass">Gradle 9.8.0</a>
													<p class="overflowclass"></p>
												</div>
												<a rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    <button class="like-btn">? <span class="count">2</span></button>
  </div>
  <div class="comment" data-id="102">
    <p>求更新后续~</p>
    <button class="like-btn">? <span class="count">0</span></button>
  </div>
</div>

JavaScript 绑定与处理逻辑

监听容器的 click，检查点击目标是否为点赞按钮，再获取其父级评论的 ID 和当前点赞数，执行业务逻辑（如发请求、更新 UI）：

用 event.target 判断是否点中了 .like-btn
用 closest('.comment') 向上找最近的评论项，拿到 dataset.id
用 querySelector('.count') 找到计数 span，更新数字
实际项目中，这里应调用 API（如 fetch(`/api/like/${id}`)），成功后再更新 UI

const commentList = document.getElementById('comment-list');

commentList.addEventListener('click', function (e) {
  if (e.target.classList.contains('like-btn')) {
    const commentItem = e.target.closest('.comment');
    const commentId = commentItem.dataset.id;
    const countEl = e.target.querySelector('.count');
    let count = parseInt(countEl.textContent) || 0;

    // 模拟点赞：+1（真实场景应先判断是否已点过，避免重复提交）
    countEl.textContent = count + 1;

    // ✅ 实际开发中在这里发请求：
    // fetch(`/api/like`, {
    //   method: 'POST',
    //   body: JSON.stringify({ id: commentId })
    // }).then(r => r.json()).then(data => {
    //   countEl.textContent = data.likeCount;
    // });
  }
});