jQuery移除元素自动解绑事件实现思路及代码


Posted in Javascript onMay 31, 2014

世界本该如此!

所以,在现代浏览器,如果你将一个元素从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); 
}; 
});

还是那句话,了解的越多,你能做的就越多!
Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JS判断字符串包含的方法
May 05 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
jQuery操作select下拉框的text值和value值的方法
May 31 #Javascript
js中的for如何实现foreach中的遍历
May 31 #Javascript
javascript 小数取整简单实现方式
May 30 #Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 #Javascript
jquery获取tagName再进行判断
May 29 #Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 #Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 #Javascript
You might like
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
js三种排序算法分享
2012/08/16 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python字符串格式化输出方法分析
2016/04/13 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python实现ID3决策树算法
2017/12/20 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
夜大自我鉴定
2013/10/31 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android