动态插入的 DOM 元素直接绑定事件会失效，因为元素尚未存在；应使用事件委托：在稳定父容器上监听事件，通过 e.target.matches() 判断目标元素并处理。
动态插入的 DOM 元素直接绑定事件会失效，根本原因就一个：元素还没“出生”，你就想给它发身份证（绑定事件）。JavaScript 执行是同步的，而动态插入（比如 insertAdjacentHTML、appendChild 或异步请求后渲染）发生在代码运行的某个时刻；如果你在插入前或插入后立刻用 document.querySelector 去找它，再调 addEventListener，大概率查不到——返回 null，然后报错或静默失败。
为什么直接绑定行不通
常见错误写法：
- 在全局脚本里写
document.querySelector('.del-btn').addEventListener('click', handler)，但按钮是点击“添加任务”后才生成的 - 调用
getData()异步获取数据并插入 HTML，紧接着就执行事件绑定，没等 DOM 渲染完 - 用
for循环批量创建按钮，但把addEventListener写在循环外部，或写在创建逻辑之前
事件委托怎么用（核心三步）
不跟每个按钮“一对一签合同”，而是让它们的“上级”统一收件、分发处理：
-
选一个稳定存在的父容器：比如
<ul id="task-list"></ul>或<div class="container">，这个元素页面加载时就在，且不会被整个替换 <li> <strong>在父容器上监听事件</strong>：用 <code>addEventListener('click', handler)绑定到它身上 -
在回调里判断谁真正被点中：通过
e.target拿到实际点击的元素，再用matches('.del-btn')或classList.contains('del-btn')做筛选
示例代码：
const list = document.getElementById('task-list');
list.addEventListener('click', function(e) {
if (e.target.matches('.del-btn')) {
const taskItem = e.target.closest('li'); // 找到对应的任务项
taskItem.remove();
}
});
注意事项和易错点
看似简单，但踩坑多：
- 别把事件绑在
document或body上做委托——虽然能用，但事件要冒泡太远，性能差，也容易被其他逻辑干扰 - iOS Safari 对
<div>、<code><span></span>等非可点击元素的 click 委托可能不响应，加一句style="cursor: pointer;"或 CSStouch-action: manipulation;更稳妥 - 避免重复绑定：如果委托逻辑写在函数里且该函数被多次调用（如反复渲染列表），要确保只绑定一次，或者先
removeEventListener再重绑 - 别用匿名函数绑定委托，否则无法移除；需要移除时，必须用命名函数或函数引用
事件委托不是“高级技巧”，而是处理动态 DOM 的标准做法。它不依赖元素何时出现，只依赖结构层级是否合理。只要父容器稳、选择器准、判断逻辑清，新插一百个按钮，删起来一样利索。
