移除dom不调用removeEventListener

wing_kai
  • 657
const addDOM = () => {
  const div = document.createElement('div')
  div.addEventListener('click', e => {})
  document.body.appendChild(div)
  div.remove()
}

let i = 99999999
while(i-- > 0) {
  addDOM()
}

如果我在移除一个dom节点前,不调用removeEventListener移除click的事件监听,会不会有不好的影响?

回复
阅读 1.2k
2 个回答
✓ 已被采纳

就你给的code而言,不会有影响的,用chrome memery工具检测一下,remove children之后,EventListener对象的数量会减少。

楼上jzoom的例子之所以能跑通,让你感觉Listener没有自动gc,是因为他的div是全局变量,所以即使从dom tree上移除,div对象仍然存在于global上被global引用着,那gc机制自然不会去清理它的listener,而题主你的div的scope是在addDom这个function里的,所以一旦999999个div从dom tree上被移除,则没有对象引用它们,则它们身上的listener也会自动被gc。

题主试下代码


const handle = e => { console.log('click event!') };
const div = document.createElement('div')
div.addEventListener('click', handle)
document.body.appendChild(div)
div.dispatchEvent(new Event('click'));
div.remove()
div.dispatchEvent(new Event('click'));
div.removeEventListener('click', handle);
div.dispatchEvent(new Event('click'));

在调用remove之后,使用dispatchEvent照样可以输出,说明Listener并没有随着remove被移除。一定要手工调用removeEventListener才行。那么结论是会有影响。

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏