我正在使用jQuery，类似这样的操作：
DOM：
<div id="parent"></div>
JS：
var _doSomeThing = function()
{
//some codes
}
$(function()
{
// appending div and binding methods to span
$('#parent').append('<span>1</span>');
$('#parent').append('<span>2</span>');
$('#parent span').bind('click', _doSomeThing);
});
function _clearDiv()
{
//clear div
$('#parent').html('');
}
//sometime in future, call clear div
_clearDiv();
我的问题是，将事件绑定到DOM，然后仅从DOM中删除元素是否会导致内存泄漏？
如果是的话，该如何解决这个问题？
jQuery的html方法试图通过删除调用.html('')后作为结果被删除的任何元素的事件处理程序来预防内存泄漏。
来自1.4.2版本的源代码。
html: function( value ) {
if ( value === undefined ) {
return this[0] && this[0].nodeType === 1 ?
this[0].innerHTML.replace(rinlinejQuery, "") :
null;
}
// See if we can take a shortcut and just use innerHTML
// THE RELEVANT PART
else if ( typeof value === "string" && !rnocache.test( value ) &&
(jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
!wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
value = value.replace(rxhtmlTag, fcloseTag);
try {
for ( var i = 0, l = this.length; i < l; i++ ) {
// Remove element nodes and prevent memory leaks
if ( this[i].nodeType === 1 ) {
jQuery.cleanData( this[i].getElementsByTagName("*") );
this[i].innerHTML = value;
}
}
// If using innerHTML throws an exception, use the fallback method
}
catch(e) {
this.empty().append( value );
}
}
else if ( jQuery.isFunction( value ) ) {
this.each(function(i){
var self = jQuery(this), old = self.html();
self.empty().append(function(){
return value.call( this, i, old );
});
});
}
else {
this.empty().append( value );
}
return this;
}
我们可以看到调用了jQuery.cleanData()函数。以下是该函数的源代码
cleanData: function( elems ) {
var data, id, cache = jQuery.cache,
special = jQuery.event.special,
deleteExpando = jQuery.support.deleteExpando;
for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
id = elem[ jQuery.expando ];
if ( id ) {
data = cache[ id ];
if ( data.events ) {
for ( var type in data.events ) {
if ( special[ type ] ) {
jQuery.event.remove( elem, type );
} else {
removeEvent( elem, type, data.handle );
}
}
}
if ( deleteExpando ) {
delete elem[ jQuery.expando ];
} else if ( elem.removeAttribute ) {
elem.removeAttribute( jQuery.expando );
}
delete cache[ id ];
}
}
}
jQuery.cache对象中查找与每个将被调用.html('')删除的元素相关联的数据对象的事件对象属性中的任何事件类型属性，并将其移除。jQuery.cache对象的属性。此数据对象包含一个events属性对象,该对象将创建一个属性，该属性的名称与要绑定事件处理程序函数的事件类型匹配。这个属性将包含一个应在元素上引发事件时调用的函数数组，所以事件处理程序函数将添加到此数组中。如果这是问题中首个事件类型和元素的事件处理程序函数，则使用addEventListener/attachEvent将注册带有调用apply的jQuery.event.handle函数(使用元素作为上下文，使得在函数执行上下文中的this将指向元素)。jQuery.event.handle函数将调用与事件类型和引发事件的元素匹配的数据对象的events属性对象中数组上的所有函数。html('')不应该导致内存泄漏，因为有多重防御措施可防止它们的发生。关于泄漏问题我无法发表评论，但您可以使用.empty()代替.html('')。这样你就可以清除innerHTML并删除任何绑定的事件处理程序。
empty）。您可以始终使用$('#parent span').unbind();以确保。
由于您不断地引用$('#parent')，因此应在全局范围内创建对该对象的引用，以便jQuery不会在每个请求中不断查找该对象。通过这样做，您实际上是缓存了对该对象的引用，这将极大地减少内存使用。
_parent = $('#parent');
...
function(){ _parent.append('<span>1</span>'); }
编辑：我从jQuery性能规则这篇文章中学到了这个技巧。
window.onunload以移除事件处理程序。你可以在1.4.2源代码中，在Sizzle代码块之前找到相关的代码 - http://code.jquery.com/jquery-1.4.2.js :) - Russ Cam