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 ajax post提交数据乱码
Nov 05 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
vuejs指令详解
Feb 07 Javascript
几种响应式文字详解
May 19 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
JS逆序遍历实现代码
2014/12/02 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
javascript回调函数详解
2018/02/06 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
领导调研接待方案
2014/02/27 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015年教研组工作总结
2015/05/04 职场文书
施工现场安全管理制度
2015/08/05 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL