如果一个单页应用需要大量操作dom节点,并且节点上绑定的事件比较多,需要手动在删除节点的时候解绑吗?删除节点后监听器是否还存在啊?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
考量以下演示代码:
let parent = document.body
let child = document.createElement('div')
child.addEventListener('click', clickHandler)
parent.appendChild(child)
当我们移除 child 对象后:
parent.removeChild(child)
此时对于 DOM Tree 来说 child 当然是不存在的了,但是内存中依然有对于它的引用,也就是 child 本身,只不过它没有在 DOM Tree 中而已。因此,clickHandler 也同样驻留在内存中。
当然了移除事件回调也不一定非要用 removeEventListener,像上例那种情况使用最简单的办法可以 child = null 即可。
以上说的是最基本的情况,现实中其实要考虑很多因素。比如你说你做的是一个 SPA,那么假设你用了某种框架吧。现在的 SPA 基本上都会告诉你:
如果你要做 DOM 操作,不要直接写在 Controller(或其他)地方,而是要写在组件(比如 Directive)里
Basically,这么做的原因是框架的组件机制都会维护自身的生命周期,如果你要处理类似本问题中的“善后”工作,你可以利用这些生命周期来实现。框架会保障一些基本的东西,比如说判断 DOM Element 是否还存在于 DOM Tree 中,或者是否还有引用等等(一般来说,组件化有一个很大的好处就是 Isolation,也就是避免到处都是引用,因为人工判断和跟踪会很累很烦很容易出错)。
老的浏览器存在很多 Bug,类似的“善后”工作可能要考虑的更细致和周全一些。