parentNode.innerHTML = '' 操作是否会移除子节点的事件监听器

首先给出测试用的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="p">
      <button class="c1">Click</button>
      <button class="c2">whatever</button>
    </div>
    <script>
      document.querySelector('.c1').addEventListener('click', () => {
        console.log('Click c1')
      })
      document.querySelector('.c2').addEventListener('click', () => {
        document.querySelector('.p').innerHTML = ''
      })
    </script>
  </body>
</html>

parentNode.innerHTML = '' 移除子节点时，子节点绑定的事件监听器会被一并移除吗？ #

现代浏览器下，如果被移除的子节点没有被其他代码持有引用，节点本身和它绑定的所有事件监听器都会被垃圾回收机制处理，不会继续留存。
如果有外部变量、闭包等持有被移除节点的引用，那节点和它绑定的监听器会一直留在内存里，直到引用被释放。

点击示例中button.c2后，怎么验证两个按钮的监听器已经被回收？ #

可以用三种简单的方法验证：

• 触发事件验证：点击c2清空父容器后，在控制台执行document.querySelector('.c1')?.click()，控制台不会输出Click c1——因为此时两个按钮已经从DOM树中被完全移除，常规DOM选择器根本查不到这两个节点，自然无法触发绑定的事件。
• DevTools元素面板检查：清空内容前，在Elements面板选中button.c1，切到Event Listeners栏可以看到绑定的click事件；点击c2清空容器后，两个button节点已经从DOM树中消失，面板里找不到对应节点，自然也看不到绑定的监听器。
• 堆快照验证：打开Chrome DevTools的Memory面板，在点击c2前后分别做一次堆快照，搜索按钮节点的类名或者引用，会发现没有外部引用的按钮节点会被标记为可回收对象，对应的监听器也没有残留引用。

如果你提前把按钮节点存到全局变量里（比如const btn1 = document.querySelector('.c1')），点击c2后在控制台调用getEventListeners(btn1)还能看到监听器，这是因为全局变量持有了节点引用导致无法回收，把变量设为null解除引用后，GC运行时就会把节点和监听器一起回收。

DOM节点被移除后，对应的事件监听器会同步移除吗？ #

要分两个层面看：

• DOM交互层面：节点从DOM树移除的瞬间，就已经脱离了文档流，用户的点击、事件冒泡等正常DOM事件根本不会派发到这个节点上，从功能表现上看监听器已经“失效”了。
• 内存回收层面：监听器不会在节点移除的瞬间被同步从内存里删掉，而是等垃圾回收器在后续的回收周期里，确认这个节点没有任何有效引用之后，才会把节点和关联的监听器一起回收。

这种innerHTML = ''的操作存在内存泄漏风险吗？ #

*常规写法（比如示例中的代码，没有额外持有被删节点的引用）*完全没有内存泄漏风险，现代浏览器的GC可以正常处理这类场景。
只有在特殊场景下才可能出现泄漏：

• 被移除的节点、节点绑定的事件回调被存到了全局变量、常驻闭包、全局缓存列表里，导致节点一直被引用无法回收
• 事件回调的闭包中引用了体积很大的常驻对象，导致回收链路无法断开
• 兼容IE8及更早版本的场景：老版本IE的DOM对象使用COM实现，JS和DOM之间的循环引用会导致GC无法正常回收，这类场景下最好在移除节点前手动调用removeEventListener解绑事件，现代浏览器早已修复这个问题。

内容的提问来源于stack exchange，提问作者Archsx