事件委托能大幅减少电商商品列表的事件监听器数量，通过父容器统一监听点击并用event.target.closest('.product-item')精准识别目标商品，避免为每个商品项单独绑定事件，提升性能、内存效率及动态加载兼容性。
事件委托能大幅减少电商商品列表的事件监听器数量，避免为每个商品项单独绑定点击事件，提升页面性能和内存效率。
用父容器统一监听点击
不要给每个商品 <li> 或 <div class="product-item"> 单独加 <code>onclick，而是把监听器绑定在它们的共同父容器（比如 <ul id="product-list"></ul>）上。点击触发时，通过 event.target 找到实际被点中的元素。
- HTML 结构保持简洁，无需内联事件或重复绑定
- JavaScript 只需一次
addEventListener，后续新增商品也不用重新绑定 - 示例：
document.getElementById('product-list').addEventListener('click', handleProductClick)
精准识别目标商品元素
点击可能发生在商品区域内的任意位置（图片、标题、价格、按钮），需可靠判断是否点中了有效商品项。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用
event.target.closest('.product-item')获取最近的父级商品容器，兼容子元素点击 - 检查返回值是否存在，避免误触空白区域或非商品 DOM 节点
- 可进一步用
data-id或dataset.productId提取商品唯一标识，例如：const productId = item.dataset.id
避免频繁 DOM 查询和冗余逻辑
委托后容易在回调里反复查节点、读属性，影响响应速度，尤其在滚动快、点击密集的列表中。
- 提前缓存常用选择器或数据结构，比如把商品 ID 映射到 SKU 或价格信息的对象
- 点击回调中只做必要操作：跳转、加购、弹窗等，不执行渲染或复杂计算
- 对高频操作（如快速连点）可加简单节流，比如用
setTimeout延迟处理或标记防重
兼容动态加载与销毁场景
电商列表常配合分页、搜索、筛选异步更新，DOM 会频繁增删，委托天然适配这类场景。
- 新插入的商品自动生效，无需手动补绑事件
- 移除整块列表时，只需移除父容器监听器（或让它随节点自然回收），无内存泄漏风险
- 若使用框架（如 React/Vue），注意不要在组件卸载后仍触发委托回调，可用标志位或 AbortController 控制
