Event binding mechanism in browsers

Question

I want to understand how event binding/unbinding works in browsers. Specifically, if I remove an element that already has an event bound to it, using for example jQuery: $("#anElement").remove();, will the bound event get removed as well?

In other words, if I don't unbind() the event first, am I creating some sort of memory leak?

Edit: I know that a handler won't be triggered again if an element is removed and then added, but what happens to the handler? Does it still sit somewhere in the browser/DOM?

Answer 1

yes, you don't have to unbind. jQuery does that for you.

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

Answer 2

When you call .remove() (or .empty()) the event handlers are removed, you're not leaking memory (at least not from this, or there's another bug in play).

Here's what happens (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;
}

The important part is this bit:

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

This runs cleanData() on any child elements and the elements itself, this removes the data and events it has from $.cache, which cleans up the memory they were using, and interally calls jQuery.event.remove() which cleans up the event handlers individually.