必须使用事件委托处理动态生成元素的click事件，即在静态父容器上监听，利用事件冒泡并用event.target.matches()判断目标元素。
动态生成的元素无法触发 click 事件
直接用 document.querySelector 或 getElementById 获取元素再调用 addEventListener，对后续 JS 插入的 DOM 无效——因为元素还不存在。浏览器执行绑定时查不到目标节点，监听器根本没挂上。
常见错误现象：
- 点击新添加的按钮/列表项，控制台无输出、无反应
- 刷新页面后原有元素能响应，但新增的始终不触发
- 用
console.log检查元素存在，但click监听器就是不执行
必须用事件委托（event delegation）
核心思路：不给动态元素本身绑事件，而是监听它的**静态父容器**，利用事件冒泡机制，在回调里判断 event.target 是否匹配目标选择器。
关键条件：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须在页面加载时就存在（如
<div id="list-container"></div>） - 绑定监听器要在父容器渲染完成后执行（通常放在
DOMContentLoaded或脚本末尾） - 回调中必须用
event.target.matches('button.add-item')这类判断，不能直接操作event.target假设它就是目标
示例代码：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
document.getElementById('list-container').addEventListener('click', function(e) {
if (e.target.matches('button.delete-btn')) {
e.target.closest('li').remove();
}
});
避免用 onclick="" 内联写法处理动态内容
内联 onclick 属性虽然能在 HTML 字符串里拼进去，但会带来三个实际问题：
- 字符串拼接易出错（引号嵌套、转义遗漏），
onclick="handleDelete("'+id+'")"很容易崩 - 函数作用域混乱，外部变量访问困难，调试时
this指向不可控 - 无法统一管理或批量移除，后期维护成本高
哪怕你非要用内联方式，也别在 JS 拼 HTML 时硬塞逻辑，改用 data- 属性存信息，让委托监听器统一读取：
<button class="dynamic-btn" data-id="123">删除</button>
然后在委托回调里取：const id = e.target.dataset.id;
注意事件捕获阶段和 stopPropagation 的干扰
如果父容器或祖先元素用了 addEventListener('click', handler, true)（第三个参数为 true），它会在捕获阶段就拦截事件，可能早于你的委托监听器执行，导致 event.target 判断失效或被提前终止。
排查要点：
- 检查是否有其他脚本在上级容器绑了带
true的监听器 - 动态元素内部若调用了
e.stopPropagation()，会阻止事件冒泡到委托层，委托监听器收不到 - 不需要阻止冒泡时，别加
stopPropagation；真要阻止，确保只影响必要范围
委托监听器本身一般不需要 stopPropagation，它的存在就是为了接收冒泡上来的事件。
