javascript - 浏览器中的事件绑定(bind)机制

Question

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

换句话说，如果我不先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 中删除它拥有的数据和事件，这会清理它们使用的内存，并在内部调用 jQuery.event.remove()单独清理事件处理程序。