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 相关文章推荐
文本加密解密
Jun 23 Javascript
Ucren Virtual Desktop V2.0
Nov 07 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
js+css3制作时钟特效
Oct 16 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
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生成随机颜色的方法
2014/11/13 PHP
10个简化PHP开发的工具
2014/12/25 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
javascript 常用方法总结
2009/06/03 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
JS中的多态实例详解
2017/10/15 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
详解js类型判断
2018/05/22 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python函数返回值实例分析
2015/06/08 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python基于百度云文字识别API
2018/12/13 Python
Python异常处理例题整理
2019/07/07 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
授权委托书
2014/07/31 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书