帝豪2娱乐注册:jQuery移除元素自动解绑事件实现思

标签:公司动态    日期:2018-01-24 09:07    录入:帝豪2娱乐平台注册    浏览:

  

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

  

世界本该如此!

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

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

  
  
实现代码  
  
有了实现思路,编码可以很快搞定。如下:  
代码如下:

  
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);  
};  
});  
  
还是那句话,了解的越多,你能做的就越多!

  

★★★小编:帝豪2娱乐平台 整理文章,欢迎大家转载 ★★★
点击右上角的分享按钮即可收藏帝豪2娱乐平台注册 随时随地与好友一起分享精彩内容噢