事件监听的dom重新生成了，但没有做事件移除， javascript还会内存泄漏吗？

Question

Array.from(document.getElementsByTagName('input')).forEach(input=>
input.addEventListener('change', function too(){
console.log('do some')
}))

存在一个页面，页面会轮询的做加载页面上的所有input，停一段时间后，销毁页面input

在上面代码每次会在页面轮询加载页面所有 input 时 执行一次，但不会在销毁页面 input 时移除监听，

这样会导致 javascript 内存泄漏吗？

一句话表示就是事件监听的dom重新生成了，但没有做事件移除 javascript还会内存泄漏吗？

Answer 1

"事件监听的dom重新生成" ，其实也就是dom移除了，这个时候当前dom元素相关的事件还是会保留的（可能各个浏览器表现也不一致了，现代浏览器也会进行处理）。不过还是建议删除or卸载前手动移除监听事件，这也是流行框架 react/vue 写组件是推荐的实践。
相关讨论也可以参考：https://stackoverflow.com/que...

Answer 2

没有移除会占用内存，从描述看应该有两个问题：

1. dom销毁了，没有移除监听事件，肯定是没法及时销毁占用内存，不过浏览器有一些优化手段
2. dom销毁后重新生成了，新的dom需要重新增加事件监听，才能保证前后表现一致

想到的解决方案大概有：

1. new MutationObserver(),监听子节点变化，在销毁时，立即通过removeEventListener移除
2. 移除时机手动控制，先removeEventListener，再轮询移除dom