Chrome DevTools中JS事件监听器数量持续增长问题排查

• 重复绑定事件监听器：比如在每次渲染循环、按钮点击回调或者DOM更新函数里，重复调用addEventListener绑定同一个事件到同一元素上。举个例子，你写了个渲染列表的函数，每次执行都给列表项绑click事件，却没先移除旧的，监听器就会一层一层叠加。
• 动态元素创建后未清理监听器：当你动态生成弹窗、列表项这类DOM元素时，每次创建都绑新的监听器，但移除元素时没调用removeEventListener解绑，或是直接用innerHTML清空父元素却不管子元素的监听器，这些监听器会留在内存里，数量自然涨上去。
• 事件委托的错误写法：要是你每次添加子元素就给父级再绑一次click委托，而不是只在页面初始化时绑一次，也会导致监听器累积。
• 第三方脚本的隐性操作：哪怕你用的是纯Vanilla JS，页面里的第三方统计、广告SDK之类的脚本，可能会在后台重复绑定滚动、点击这类事件来收集数据，又没做好清理工作。
• 定时器/异步回调里的重复绑定：如果在setInterval、setTimeout或者异步请求的回调里绑定事件，定时器没被正确清除，或者异步请求频繁触发，就会不断新增监听器。
• 未释放的DOM节点引用：某个DOM元素被移除后，还被JS变量引用着，它的事件监听器不会被垃圾回收，看起来就像是监听器数量一直在增加，本质是内存泄漏导致的残留。

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