addEventListener 失效因新 DOM 节点未绑定监听器；应使用事件委托绑定父容器并用 matches() 判断目标；innerHTML 不执行 script 且有 XSS 风险，需 DOMParser 解析后手动插入并执行脚本；IntersectionObserver 适用于视觉驱动场景，点击触发适用于明确用户意图场景；框架无法感知绕过其 API 的 DOM 操作，须用响应式方式更新。
页面元素动态加载时，addEventListener 为什么失效？
因为新插入的 DOM 节点没有被绑定事件监听器。直接对 document.querySelectorAll('.btn') 获取后循环绑定，只对当前已存在的节点有效；后续用 innerHTML 或 appendChild 加入的同名元素不会自动拥有事件。
解决方法是使用事件委托：把监听器绑定在父容器（如 document.body 或某个稳定存在的 div#container），再通过 event.target 判断是否命中目标元素。
- 推荐写法：
document.getElementById('container').addEventListener('click', function(e) { if (e.target.matches('button.load-more')) { handleLoadMore(); } }); - 避免写成
document.body.addEventListener('click', ...)，可能因冒泡过深或干扰其他逻辑而难调试 - 注意
e.target可能是子元素（比如按钮里的span），用matches()比className.includes()更准确
用 fetch 加载 HTML 片段后如何安全插入并执行脚本？
原生 innerHTML = htmlString 不会执行其中的 标签，且存在 XSS 风险。若后端返回的是纯 HTML 片段（非 JSON），需手动提取并运行脚本。
- 先用
DOMParser解析字符串：const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html');
- 用
element.replaceChildren(...doc.body.childNodes)插入（比innerHTML更可控） - 手动收集并执行
标签：doc.querySelectorAll('script').forEach(script => { const s = document.createElement('script'); s.textContent = script.textContent; document.head.appendChild(s); }); - 更稳妥的做法是后端返回 JSON，前端用模板函数生成 DOM，彻底规避内联脚本
IntersectionObserver 触发加载 vs 点击触发加载，怎么选？
两者适用场景不同，不是“谁更好”，而是“谁更合适”。
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记（深入）”；
- 列表无限滚动、图片懒加载等视觉驱动场景，用
IntersectionObserver—— 它不阻塞主线程，且能提前触发（如设置rootMargin: '200px'） - 模态框、折叠面板、按需加载的配置表单等用户明确意图的场景，用点击/输入等显式交互触发更合理，避免预加载浪费带宽和内存
- 注意：多个
IntersectionObserver实例叠加监听同一区域时，回调可能被节流，需检查isIntersecting值再决定是否加载，防止重复请求
动态加载内容后，Vue/React 组件没更新？别急着重写框架
这是常见误解：框架的响应式系统只追踪它自己创建的节点。如果你绕过框架（比如用 document.getElementById('app').innerHTML = html），Vue 和 React 都无法感知变化，也不会重新渲染。
- Vue 用户应使用
v-html+ref更新，或调用app.mount()重新挂载局部组件 - React 用户必须走
useState/useEffect流程，把动态内容作为 props 或 state 注入，而不是操作 DOM - 如果必须混合使用（如遗留 jQuery 插件），应在框架生命周期钩子（如
mounted、useEffect(() => {...}, [])）中初始化，并确保卸载时清理（如销毁插件实例、移除全局事件）
最常被忽略的一点：动态加载的内容如果包含表单控件（input、select），其初始值不会自动同步到框架的响应式数据中——需要手动触发一次 dispatchEvent(new Event('input', { bubbles: true })) 来补全。
