必须用事件委托处理动态节点，因为新插入元素创建时不在DOM中，传统逐个绑定无效；利用冒泡机制在稳定父容器监听，用event.target.closest()精准捕获目标子元素，新增节点无需重新绑定。
直接在父容器上监听事件，用 event.target.closest() 找目标子节点，就能让所有新插入的元素自动响应——不用重新绑定、不依赖 ID、不维护数组。
为什么必须用事件委托处理动态节点
动态插入的元素在创建时并不存在于 DOM 中，如果按传统方式对每个子节点单独调用 addEventListener，新节点根本不会被“看到”，自然无法触发事件。而事件冒泡机制保证：只要子节点触发了 click、input 等冒泡事件，它就一定会传到已存在的父级节点上。委托的本质，就是把监听动作从“找每一个子节点”变成“守在父节点等事件冒上来”。
核心写法：一个监听器 + closest 精准捕获
关键不在绑定多少次，而在绑定在哪里、怎么识别目标：
- 监听器只加在**已挂载且稳定存在的父容器**上（如
#container或.list），确保脚本执行时它一定在 DOM 中 - 回调中统一用
event.target.closest('.target-class')判断是否点中了你要响应的子元素——它会自动向上查找最近的匹配祖先，哪怕目标是嵌套在span > i > button里的按钮也稳稳命中 - 避免用
e.target.className === 'btn'或e.target.tagName === 'BUTTON'，这些只认直接点击的节点，遇到文字或图标包裹就失效
添加新节点时只需专注结构，不碰事件逻辑
新增元素完全不需要手动绑定事件，也不需要生成 <script></script> 标签或调用额外函数：
- 推荐用
insertAdjacentHTML('beforeend', htmlString)插入整块结构，简洁高效，避免反复查询 DOM - 结构里别硬编码 ID（如
id="item-1"），ID 易冲突、难维护；改用语义化 class 和层级关系定位（例如通过.box-wrap包裹整个卡片） - 如果需区分操作类型（如“删除”和“编辑”按钮共存），在同一个监听器内用多个
closest()分支判断即可，无需拆成多个监听器
常见陷阱与规避方式
几个高频翻车点，提前绕开：
-
父容器未提前存在：脚本运行时
document.querySelector('#container')返回 null，监听器静默失败。务必确认 HTML 中父容器已渲染，或把 JS 放在 body 底部、或用DOMContentLoaded包裹 -
误用静态数组缓存节点：比如
Array.from(document.querySelectorAll('.btn'))后遍历绑定——这个数组不会随 DOM 变化更新，新按钮永远进不去 -
用错事件阶段：委托依赖冒泡，所以不要用
useCapture: true（捕获阶段），除非有特殊穿透需求
