JavaScript动态加载与交互教程详解

本文深入解析了JavaScript动态加载与交互实现中的四大核心难题：事件监听器在新DOM节点上失效的本质原因及事件委托的精准解决方案；innerHTML的安全隐患与DOMParser结合手动脚本执行的可靠替代方案；IntersectionObserver与显式交互触发加载的适用边界与性能权衡；以及绕过框架API直接操作DOM导致Vue/React响应式失效的根本原因与正确集成方式——涵盖从原生JS最佳实践到框架协同的关键细节，助你构建稳定、安全、可维护的动态Web应用。

页面元素动态加载时，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 不会执行其中的