JS 如何用事件委托优化性能？

Question

JS 如何用事件委托优化性能？

仓乃文 · Accepted Answer

当列表中有大量子元素需要绑定相同事件时，逐个绑定会消耗大量内存。事件委托利用事件冒泡，只在父元素绑定一个监听器，通过 event.target 判断实际触发的子元素。基础实现： ```javascript document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("点击了:", e.target.textContent); } }); ``` 使用 matches 精确匹配选择器（推荐）： ```javascript document.getElementById("list").addEventListener("click", (e) => { const deleteBtn = e.target.closest(".delete-btn"); if (deleteBtn) { const id = deleteBtn.dataset.id; console.log("删除:", id); } }); ``` HTML 结构： ```html

项目1
项目2

``` 补充说明： - 事件委托减少内存消耗，1000 个元素只需 1 个监听器 - 动态添加的子元素无需重新绑定事件，天然支持 - e.target.closest() 向上查找匹配的祖先，比 matches 更灵活 - 注意 e.target 可能是子元素的子元素，用 closest 可以正确处理嵌套结构