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

soゝso 2016-08-22 18:25:59 945

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,类似的“善后”工作可能要考虑的更细致和周全一些。

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/37.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

相关文章
Javascript 删除节点是否需要将手动事件
Oracle与Mysql删除重复的数据,Oracle和Mysql数据去重复
JavaScript中splice()方法,有Demo详细介绍
Javascript模块化编程,本站使用 require.js 优化JS加载, require.js下载
Elasticsearch教程(八) elasticsearch delete 删除数据(Java)
JavaScript function 类型的使用说明
怎么合理管理、提高Javascript的性能
Javascript 生成UUID,Java生成UUID
IOS 中 urldecode 如何解码,解码“+”(加号)和空格处理方式
js html5 canvas制作多个小球碰撞的动画效果
最新文章
Macbook teamviewer 突破5分钟,苹果电脑重置 Mac 地址,100%解决限制 220
腾讯云代金券 10000 元/ 30000 代金券领取技巧 324
SEO 换友情链接的主意事项,友情链接断链、友情链接套路说明 229
Springboot + Mybatis,数据库多数据源配置项目Demo【源码下载】 1903
Mac mtr 安装并使用,mrt: command not found 299
Java 集成阿里云消息队列,日志消息存储 497
域名备案注意事项,网站域名ICP备案快速通过攻略【干货分享】 472
Springboot 集成Aliyun MQ消息队列,Aliyun 消息队列配置及代码实现 837
SpringBoot 集成Spring-data-redis,redis对象序列化存储 2029
天气API,全国天气 JSON API接口,可以获取十五天的天气预报 604
最热文章
Elasticsearch教程(四) elasticsearch head 插件安装和使用 126781
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 108004
Elasticsearch教程(六) elasticsearch Client创建 78810
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 74434
Elasticsearch教程(二),IK分词器安装 73217
Elasticsearch教程(一),全程直播(小白级别) 65782
Elasticsearch教程(五) elasticsearch Mapping的创建 61877
Elasticsearch教程(三),IK分词器安装 (极速版) 56361
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 53539
Java 解析JSON,JSON-LIB jar包下载和使用。 48973

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

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

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

支付扫码

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

正在加载... ...