javascript - Do events handlers on a DOM node get deleted with the node? -

(note: i'm using jquery below, question general javascript one.)

say i've got div#formsection contents repeatedly updated using ajax, this:

var formsection = $('div#formsection'); var newcontents = $.get(/* url next section */); formsection.html(newcontents); 

whenever update div, trigger custom event, binds event handlers of newly-added elements, this:

// when first section of form loaded, runs... formsection.find('select#phonenumber').change(function(){/* stuff */});  ...  // ... when second section of form loaded, runs... formsection.find('input#foo').focus(function(){/* stuff */}); 

so: i'm binding event handlers dom nodes, later, deleting dom nodes , inserting new ones (html() that) , binding event handlers new dom nodes.

are event handlers deleted along dom nodes they're bound to? in other words, load new sections, lots of useless event handlers piling in browser memory, waiting events on dom nodes no longer exist, or cleared out when dom nodes deleted?

bonus question: how can test myself?

event handler functions subject same garbage collection other variables are. means removed memory when interpreter determines there no possible means obtain reference function. deleting node not guarantee garbage collection. instance, take node , associated event handler

var node = document.getelementbyid('test'); node.onclick = function() { alert('hai') }; 

now lets remove node dom

node.parentnode.removechild(node); 

so node no longer visible on website, still exists in memory, event handler

node.onclick(); //alerts hai 

as long reference node still accessible somehow, it's associated properties (of onclick one) remain intact.

now let's try without creating dangling variable

document.getelementbyid('test').onclick = function() { alert('hai'); }  document.getelementbyid('test').parentnode.removechild(document.getelementbyid('test')); 

in case, there seems no further way access dom node #test, when garbage collection cycle run, onclick handler should removed memory.

but simple case. javascript's use of closures can complicate determination of garbage collectability. lets try binding more complex event handler function onclick

document.getelementbyid('test').onclick = function() {   var = 0;   setinterval(function() {     console.log(i++);   }, 1000);    this.parentnode.removechild(this); }; 

so when click on #test, element instantly removed, 1 second later, , every second afterwards, see incremented number printed console. node removed, , no further reference possible, yet seems parts of remain. in case event handler function not retained in memory scope created is.

so answer guess is; depends. if there dangling, accessible references deleted dom nodes, associated event handlers still reside in memory, along rest of properties. if not case, scope created event handler functions might still in use , in memory.

in cases (and happily ignoring ie6) best trust garbage collector job, javascript not c after all. however, in cases last example, important write destructor functions of sort implicitly shut down functionality.