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', '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);
};
});

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *