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

世界本该如此！

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