快捷導(dǎo)航

jQuery移除元素自動(dòng)解綁事件實(shí)現(xiàn)思路及代碼

更新時(shí)間：2014年05月31日 16:52:10 作者：

用jQuery將元素移除的基本方法常用的有三個(gè)，一個(gè)是remove()方法，一個(gè)是html()方法，一個(gè)是empty()方法

世界本該如此！

所以，在現(xiàn)代瀏覽器，如果你將一個(gè)元素從DOM樹種進(jìn)行移除的時(shí)候，瀏覽器會(huì)自動(dòng)幫你綁定的事件進(jìn)行解綁以釋放其占用的內(nèi)存。也許你猜到了，較老版本的瀏覽器則不會(huì)主動(dòng)去做這件事，所以，當(dāng)你的應(yīng)用在較老版本的瀏覽器運(yùn)行的越久，其消耗內(nèi)存越多，應(yīng)用就會(huì)變得越來越卡。因此，需要我們自己對(duì)要?jiǎng)h除的元素進(jìn)行事件解綁。

實(shí)現(xiàn)思路

用jQuery將元素移除的基本方法常用的有三個(gè)，一個(gè)是remove()方法，一個(gè)是html()方法，一個(gè)是empty()方法。我們可以對(duì)此三個(gè)方法進(jìn)行進(jìn)一步的封裝，我們會(huì)在事件綁定的時(shí)候給綁定事件的元素添加一個(gè)屬性標(biāo)識(shí)，從要?jiǎng)h除的元素中去尋找有此標(biāo)識(shí)的元素，然后進(jìn)行事件的完全解綁。一切都是那么的巧妙！需要注意的一點(diǎn)是，remove()方法在執(zhí)行的時(shí)候會(huì)對(duì)其自身進(jìn)行事件解綁，并且該方法可以接受一個(gè)選擇器參數(shù)，以刪除其子元素。

實(shí)現(xiàn)代碼

有了實(shí)現(xiàn)思路，編碼可以很快搞定。如下：

復(fù)制代碼代碼如下:

 
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)); 
}; 
}); 
// 為某一個(gè)元素移除綁定的事件 
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); 
}; 
}); 
// 擴(kuò)展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); 
}; 
}); 