直接绑定子元素事件会失效，因为动态插入的元素在JS执行时尚未存在于DOM中；应使用事件委托，将监听器绑定到静态父容器，利用事件冒泡机制捕获子元素行为，并通过event.target过滤目标元素。

为什么直接绑定子元素事件会失效

动态插入的按钮、列表项或表单控件（比如用 insertAdjacentHTML 或 innerHTML 添加）在 JS 执行时往往还不存在于 DOM 中。你写 document.querySelectorAll('.btn').forEach(...)，但此时 NodeList 是空的——不是选择器写错了，是时机错了。异步请求返回后插入 HTML，和后续的事件绑定代码之间没有等待关系，JS 不会自动“等 DOM 渲染完再执行”。

怎么用事件委托绑定到父容器

核心是把监听器加在父元素上，靠事件冒泡捕获子元素行为。只要父容器是静态存在的（比如页面加载时就有的 <div id="list"></div>），它就能持续响应未来插入的所有子元素。

• 用 document.getElementById('list') 或 document.querySelector('.container') 获取父节点
• 调用 addEventListener('click', handler)，不要写在子元素上
• 在 handler 里用 event.target 判断点击的是不是目标元素（例如检查 event.target.classList.contains('delete-btn')）
• 避免误触发：如果父容器内有其他非目标元素（如文字、空白区域），必须加条件过滤，否则点哪都进逻辑

哪些事件支持事件委托

只有会冒泡的事件才能用委托。常见可委托的包括：click、mousedown、keyup、submit；但 focus、blur、load 不冒泡，不能委托，必须直接绑定到目标元素。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 不确定某个事件是否冒泡？查 MDN 文档里该事件的“Bubbles”字段，值为 “Yes” 才行
• mouseenter 和 mouseleave 虽然名字像，但其实不冒泡，别误用
• 表单类事件如 input、change 可以委托，但要注意触发时机（input 是实时的，change 是失焦后）

容易被忽略的清理与性能细节

事件委托本身省去了大量监听器，但不代表可以完全不管生命周期。尤其在单页应用中反复挂载/卸载组件时，旧的委托监听器若没清除，会持续响应新 DOM，造成逻辑错乱或内存泄漏。

立即学习“前端免费学习笔记（深入）”；

• 用 removeEventListener 解绑时，必须传入**同一个函数引用**，不能传匿名函数
• 推荐把 handler 写成具名函数或保存在变量里，方便后续移除
• 如果父容器本身也会被整个替换（比如 el.innerHTML = newHtml），那委托就断了——这时应确保父容器稳定，或改用 document 级委托（慎用，影响范围太大）