应使用事件委托而非逐个绑定，将 addeventlistener 挂载在最近且稳定的父容器（如 #action-panel）上，用 e.target.closest('button[data-action]') 精准捕获目标，并避免 innerhtml 全量替换以保持监听有效性。
为什么不能用 querySelector 逐个绑定？
常见错误是写 document.querySelector('.btn').addEventListener，结果只绑到第一个按钮；改用 querySelectorAll 后再 forEach 绑定，看似可行，但每新增一个按钮就得重跑一遍循环，动态插入时容易漏绑，且 512 个按钮就创建 512 个监听函数，内存和性能都浪费。
addEventListener 必须挂在哪一级父容器？
选最近的、稳定存在的父容器，比如 <div id="action-panel"> 或 <code><ul class="item-list"></ul>。不能挂到 document 或 body —— 冒泡路径太长，e.target.closest() 在低端设备上明显卡顿；第三方 SDK 一旦调用 stopPropagation()，整个委托就失效。
实操要点：
- 确保该父容器在脚本执行时已存在于 DOM 中，否则
addEventListener静默失败 - 避免用
innerHTML = newHTML全量替换父容器，会断开事件监听器与内部节点的引用关系 - 改用
replaceChildren()或append()更安全，委托逻辑自动延续
怎么精准识别被点的是哪个按钮？
别用 e.target.classList.contains('delete') 或 e.target.tagName === 'BUTTON' —— 点击按钮里的图标或文字时，e.target 是子元素，不是按钮本身，直接判空或报错。
统一用 e.target.closest('button[data-action="delete"]')：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 能穿透任意嵌套层级，返回最近的匹配祖先节点
- 用
data-action比纯 class 更语义化，避免样式重构导致逻辑断裂 - 加空值防护：
const btn = e.target.closest('button[data-action]'); if (!btn) return;
动态插入按钮后还要手动重绑吗？
不用。只要父容器没被 replaceWith()、outerHTML = 或移除重建，新插入的按钮点击立刻生效 —— 事件委托靠冒泡机制触发，不依赖节点初始化时机。
但要注意：
- 插入时用
parent.append(newBtn)或parent.prepend(newBtn)，别用字符串拼接 +innerHTML - 如果按钮带自定义属性（如
data-id="123"），确保插入前已正确设置，委托逻辑才能读取 - focus/blur/change 这类不冒泡的事件无法委托，必须单独绑定到具体元素
真正容易被忽略的是：委托生效的前提是父容器“稳定存在”，而不是“看起来没变”——哪怕只是用 innerHTML 覆盖了一次，内部所有节点就被重建，监听器虽然还在，但 e.target 指向的是新节点，旧引用全失效。
