世界本该如此!

所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存。也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡。因此,需要我们自己对要删除的元素进行事件解绑。

实现思路

用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法。我们可以对此三个方法进行进一步的封装,我们会在事件绑定的时候给绑定事件的元素添加一个属性标识,从要删除的元素中去寻找有此标识的元素,然后进行事件的完全解绑。一切都是那么的巧妙!需要注意的一点是,remove()方法在执行的时候会对其自身进行事件解绑,并且该方法可以接受一个选择器参数,以删除其子元素。

实现代码

有了实现思路,编码可以很快搞定。如下:
define(['jquery', 'underscore'], function () {var bindDirects = ['delegate', 'bind','on', 'hover', 'blur', 'change', 'click', 'dblclick', 'focus', 'keydown', 'keypress', 'keyup', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'resize', 'scroll', 'select', 'submit'];var eMarker = '_addedEvent';_.each(bindDirects, function (eventName) {var alias = $.fn[eventName];$.fn[eventName] = function () {var $tar = _.isElement(this)?$(this):this;var hasEventAdded = $tar.attr(eMarker) || '';var _en = eventName;if (hasEventAdded.length) {_en += ',' + hasEventAdded;}$tar.attr(eMarker, _en);return alias.apply(_.isElement(this)?$tar:this, [].slice.call(arguments));};});// 为某一个元素移除绑定的事件function removeEvents($tar) {var addedEventsName = $tar.attr(eMarker);if (addedEventsName) {addedEventsName.replace(/[^,]+/g, function (eventName) {// 全部移除if (eventName === 'delegate') {$tar.undelegate();} else {$tar.unbind();}return eventName;});}}var funcs = ['html','empty'];_.each(funcs, function (func) {var alias = $.fn[func];$.fn[func] = function () {var $tar = _.isElement(this)?$(this):this;if($tar.length){$tar.find('*[' + eMarker + ']').each(function (k, subEl) {try{removeEvents($(subEl));}catch(e){console.error(e.message);}});}var args = [].slice.call(arguments);return alias.apply($tar, args);};});// 扩展remove()方法var alias = $.fn.remove;$.fn.remove = function () {var $tar = _.isElement(this)?$(this):this,arg = arguments;if($tar.length && !arg.length){$tar.find('*[' + eMarker + ']').each(function (k, subEl) {try{removeEvents($(subEl));}catch(e){console.error(e.message);}});}if(arg.length){var selector = arg[0];if(_.isString(selector)){$tar.find(selector).each(function(k,curEl){var $cur = $(curEl);$cur.find('*[' + eMarker + ']').each(function (k, subEl) {try{removeEvents($(subEl));}catch(e){console.error(e.message);}});removeEvents($cur);$cur.remove();});}}var args = [].slice.call(arguments);return alias.apply($tar, args);};
});

还是那句话,了解的越多,你能做的就越多!

jQuery移除元素自动解绑事件实现相关推荐

  1. 动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件

    动态添加行 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

  2. transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

    transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...

  3. 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  4. jQuery 移除元素的事件

    jQuery 移除元素的事件 移除行内事件 $("el").removeAttr("onclick") 移除绑定事件 $("el").unb ...

  5. vue:组件自定义事件、绑定、解绑事件

    vue:组件自定义事件.绑定.解绑事件 自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...

  6. 踩坑系列之使用jQuery移除元素

    jQuery移除元素使用 移除指定元素 移除指定元素的子元素 移除指定元素 删除被选元素及其子元素 $("tr").remove();//删除tr以及tr的子元素 对被删元素进行过 ...

  7. jquery移除元素同时销毁事件

    jquery常用销毁元素的方法有empty和remove:两者删除效果是一样的,但是empty只是清空节点元素,如果节点元素绑定了事件,并不会被清楚,一定程度上会到时内存泄露,而remove则是清除一 ...

  8. jquery移除元素属性/绑定事件

    1.绑定事件: $("#DS_Panel_71").find("div").find("input:eq(2)").bind("c ...

  9. jQuery学习:事件处理(绑定事件 解绑事件 事件委派/委托))

    <div class="outer">外部div<div class="inner">内部div</div></div ...

最新文章

  1. Java线上程序频繁JVM FGC问题排障与启示
  2. PowerBuilder 11.x 的重要进步和不足
  3. 【转载】闲话操作系统(二)
  4. 阿里云ECS——[您的云服务器(xxx.xxx.xxx.xxx)由于被检测到对外攻击,已阻断该服务器对其它服务器端口(TCP:6379)的访问]解决方案
  5. linux kill命令使用方法,Linux初学者的killall命令(8个例子)
  6. 吴恩达深度学习2.1练习_Improving Deep Neural Networks(Initialization_Regularization_Gradientchecking)
  7. 在Bash中重定向stderr和stdout
  8. 员工管理的html页面,员工管理.html
  9. 多任务学习Multi-Task Learning
  10. 我国支付结算体系概况
  11. SRE(站点可靠性工程)介绍
  12. 快速了解idm+油猴插件配合,极速下载(适用于全网)
  13. 设备综合效率(OEE)的计算方法
  14. GRP-U8怎么增加项目
  15. luogu P4315 月下“毛景树”
  16. 读书笔记之张潇雨个人投资课
  17. 有趣的java代码_求一些有趣的java小程序?
  18. 新书的各种购买方式汇总【人人都是产品经理】
  19. 清华大学计算机考研机试KY6 手机键盘
  20. 梳理STM32F429之通信传输部分---NO.3 串口空闲IDEL中断+DMA+FreeRTOS

热门文章

  1. r语言实现互相关分析和典型相关分析
  2. redis错误MISCONF Redis is configured to save RDB snapshots, but it is currently not able to pers......
  3. Win10 WLAN驱动正常但仍然不显示无线网络解决办法
  4. sentinel整合feign
  5. 批量给透明图片添加纯色背景<matlab>
  6. oracle40T数据如何迁移,关于数据迁移的方法、步骤和心得
  7. 国产版Jetson Nano学习篇2—详细讲解Jetson Nano的开发环境配置和其 Ubuntu 18.04系统的操作,入门必看
  8. 谷歌浏览器所有版本下载_我下载了Google了解我的所有信息
  9. 通信电子电路实验(四)—— 幅度调制信号的仿真与实现
  10. C++多态之虚函数表详解及代码示例