JavaScript 中怎么用事件冒泡实现购物车数量增减-js教程-PHP中文网

用事件冒泡实现购物车数量增减，核心是将“+”“−”按钮点击事件委托给共同父容器（如.cart-list），通过event.target识别操作类型与商品id，动态更新数量并同步数据源，支持动态添加商品自动生效。

javascript 中怎么用事件冒泡实现购物车数量增减

用事件冒泡实现购物车数量增减，核心是把“+”“−”按钮的点击事件委托给它们的共同父容器（比如 .cart-item 或 .cart-list），避免为每个按钮单独绑定事件，既节省性能，又方便动态添加商品时自动生效。

1. HTML 结构要清晰，带明确标识

每个商品行应有唯一标识（如 data-id），加减按钮用统一类名，并通过 data-action 标明操作类型：

<div class="cart-list">
  <div class="cart-item" data-id="101">
    <span class="item-name">苹果</span>
    <span class="item-count">2</span>
    <button class="btn-change" data-action="decrease">−</button>
    <button class="btn-change" data-action="increase">+</button>
  </div>
  <div class="cart-item" data-id="102">
    <span class="item-name">香蕉</span>
    <span class="item-count">1</span>
    <button class="btn-change" data-action="decrease">−</button>
    <button class="btn-change" data-action="increase">+</button>
  </div>
</div>

2. JS 中监听父容器，用 event.target 判断来源

给 .cart-list 绑定一次点击事件，利用事件冒泡捕获子按钮的点击，再根据 data-action 和父级 data-id 执行逻辑：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

document.querySelector('.cart-list').addEventListener('click', function (e) {
  const btn = e.target;
  if (!btn.classList.contains('btn-change')) return;
<p>const item = btn.closest('.cart-item');
const id = item.dataset.id;
const countEl = item.querySelector('.item-count');
let count = parseInt(countEl.textContent);</p><p>if (btn.dataset.action === 'increase') {
count++;
} else if (btn.dataset.action === 'decrease') {
count = Math.max(1, count - 1); // 最少为 1
}</p><p>countEl.textContent = count;</p><p>// ✅ 这里可同步更新数据模型或发送请求
updateCartData(id, count);
});</p>