Question

我想了解事件绑定/解除绑定在浏览器中的工作原理。具体来说，如果我删除已经绑定了事件的元素，使用例如jQuery：$("#anElement").remove();，绑定事件也会被删除吗？

换句话说，如果我先没有unbind()事件，我是否会创建某种内存泄漏？

编辑：我知道如果删除一个元素然后添加一个元素，将不会再次触发处理程序，但处理程序会发生什么？它仍然位于浏览器/ DOM中的某个位置吗？

Answer 1

当您致电.remove()（或.empty()）时，事件处理程序将被删除，您不会泄漏内存（至少不会泄露内存，或者还有其他错误）。

以下是发生的事情（in current source）：

remove: function( selector, keepData ) {
  for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
    if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
      if ( !keepData && elem.nodeType === 1 ) {
        jQuery.cleanData( elem.getElementsByTagName("*") );
        jQuery.cleanData( [ elem ] );
      }

      if ( elem.parentNode ) {
         elem.parentNode.removeChild( elem );
      }
    }
  }
  return this;
}

重要的是这一点：

jQuery.cleanData( elem.getElementsByTagName("*") );
jQuery.cleanData( [ elem ] );

这会在任何子元素和元素本身上运行cleanData()，这会从$.cache中删除它所拥有的数据和事件，从而清除它们正在使用的内存，并且会调用{{3}它可以单独清理事件处理程序。

Answer 2

是的，你不必unbind。 jQuery为你做到了。

here's a simple demo

$(function(){
    $('#featured').click(function(){
        alert('test');
    });
    var elem;
    $('#remove').click(function(){
       elem = $('#featured').remove();        
    });
    $('#attach').click(function(){
       elem.appendTo('body');        
    });
});

浏览器中的事件绑定机制

2 个答案: