Javascript 删除节点后是否需要将手动将事件解绑?

soゝso 2016-08-22 18:25:59 824
分享到:

segmentfault 上有一个问题:Javascript 删除节点后是否需要将手动将事件解绑?

问题描述:

如果一个单页应用需要大量操作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,类似的“善后”工作可能要考虑的更细致和周全一些。

关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
Oracle与Mysql删除重复的数据,Oracle和Mysql数据去重复
JavaScript中splice()方法,有Demo详细介绍
Elasticsearch教程(八) elasticsearch delete 删除数据(Java)
Javascript模块化编程,本站使用 require.js 优化JS加载, require.js下载
Javascript 生成UUID,Java生成UUID
JavaScript function 类型的使用说明
怎么合理管理、提高Javascript的性能
JSON.stringify 函数 (JavaScript)讲解
IOS 中 urldecode 如何解码,解码“+”(加号)和空格处理方式
js html5 canvas制作多个小球碰撞的动画效果
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 38754
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 66
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 41
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 89
CDN 请求返回 connection reset by peer,被拦截请求解决方案 33
Google AdSense 申请技巧,谷歌广告申请通不过教程 66
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 45
支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍 866
谈谈这次对 SOJSON 的改版 146
Java 计算2个时间相差多少年,多少个月,多少天的几种方式 484
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 38754
Elasticsearch教程(四) elasticsearch head 插件安装和使用 108910
Elasticsearch教程(六) elasticsearch Client创建 73264
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70727
Elasticsearch教程(二),IK分词器安装 67441
Elasticsearch教程(三),IK分词器安装 (极速版) 54071
Elasticsearch教程(五) elasticsearch Mapping的创建 51534
Elasticsearch教程(一),全程直播(小白级别) 51227
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47703
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40877

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...