直接绑定子元素事件会失效，因为动态插入的元素在js执行时尚未存在于dom中；应使用事件委托，将监听器绑定到静态父容器，利用事件冒泡机制捕获子元素行为，并通过event.target过滤目标元素。
为什么直接绑定子元素事件会失效
动态插入的按钮、列表项或表单控件（比如用 insertAdjacentHTML 或 innerHTML 添加）在 JS 执行时往往还不存在于 DOM 中。你写 document.querySelectorAll('.btn').forEach(...)，但此时 NodeList 是空的——不是选择器写错了，是时机错了。异步请求返回后插入 HTML，和后续的事件绑定代码之间没有等待关系，JS 不会自动“等 DOM 渲染完再执行”。
怎么用事件委托绑定到父容器
核心是把监听器加在父元素上，靠事件冒泡捕获子元素行为。只要父容器是静态存在的（比如页面加载时就有的 <div id="list"></div>），它就能持续响应未来插入的所有子元素。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
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 不冒泡，不能委托，必须直接绑定到目标元素。
- 不确定某个事件是否冒泡？查 MDN 文档里该事件的“Bubbles”字段，值为 “Yes” 才行
-
mouseenter和mouseleave虽然名字像，但其实不冒泡，别误用 - 表单类事件如
input、change可以委托，但要注意触发时机（input是实时的，change是失焦后）
容易被忽略的清理与性能细节
事件委托本身省去了大量监听器，但不代表可以完全不管生命周期。尤其在单页应用中反复挂载/卸载组件时，旧的委托监听器若没清除，会持续响应新 DOM，造成逻辑错乱或内存泄漏。
- 用
removeEventListener解绑时，必须传入**同一个函数引用**，不能传匿名函数 - 推荐把 handler 写成具名函数或保存在变量里，方便后续移除
- 如果父容器本身也会被整个替换（比如
el.innerHTML = newHtml），那委托就断了——这时应确保父容器稳定，或改用 document 级委托（慎用，影响范围太大）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
