Are JQuery Events automatically unbound upon destruction of what they where bound to?

Question

Hi All

If I have the following code in two functions of an object:

add: function()
{
    // create trip.
    var trip = new Trip();

    // add the trip using its id.
    this.trips[trip.id] = trip;
},

remove: function(tripId)
{
    // remove trip.
    delete this.trips[tripId];
}

NOTE: The constructor for the Trip object binds a bunch of custom JQuery event handlers to itself.

Will the event handlers bound to the Trip object be automatically destroyed/cleaned up when the Trip object is deleted?

Would the same occur for a dom node if it was removed and had event handlers bound to it?

Also I read that objects are not cleaned up by the garbage collector until all references to them no longer exist, so do the event handlers bound to the object by itself count as references and prevent the object from being cleaned up, even when I am no longer referencing it?

Answer 1

As far as I know, you can only bind event handlers to nodes, or, in special cases, the window, document, etc. For DOM nodes, the event handlers will be removed. Even if they weren't, they wouldn't be able to be triggered anyway. Deleting the object will remove the event handlers associated with it. The event handlers should not prevent the object from being garbage collected.

Answer 2

Would the same occur for a dom node if it was removed and had event handlers bound to it?

this.handlerClick = function () { ... };

$(this.testDomNode).bind('click', this.handlerClick);

this.testDomNode.parentNode.removeChild(this.testDomNode);

Using the above code and testing with FireQuery in FireFox removing the dom node does not unbind the handler from the event,

it seems you have to explicitly unbind the handler before removing the dom node as follows:

$(this.testDomNode).unbind('click', this.handlerClick);

this.testDomNode.parentNode.removeChild(this.testDomNode);