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

by

Event handler functions are subject to the same Garbage Collection that other variables are. That means they will be removed from memory when the interpreter determines that there is no possible means to obtain a reference to the function. Simply deleting a node however does not guarantee garbage collection. For instance, take this node and associated event handler

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

Now lets remove the node from the DOM

node.parentNode.removeChild(node);

So node will no longer be visible on your website, but it clearly still exists in memory, as does the event handler

node.onclick(); //alerts hai

As long as the reference to node is still accessible somehow, it’s associated properties (of which onclick is one) will remain intact.

Now let’s try it without creating a dangling variable

document.getElementById('test').onclick = function() { alert('hai'); }

document.getElementById('test').parentNode.removeChild(document.getElementById('test'));

In this case, there seems to be no further way to access the DOM node #test, so when a garbage collection cycle is run, the onclick handler should be removed from memory.

But this is a very simple case. Javascript’s use of closures can greatly complicate the determination of garbage collectability. Lets try binding a slightly more complex event handler function to onclick

document.getElementById('test').onclick = function() {
  var i = 0;
  setInterval(function() {
    console.log(i++);
  }, 1000);

  this.parentNode.removeChild(this);
};

So when you click on #test, the element will instantly be removed, however one second later, and every second afterwards, you will see an incremented number printed to your console. The node is removed, and no further reference to it is possible, yet it seems parts of it remain. In this case the event handler function itself is likely not retained in memory but the scope it created is.

So the answer I guess is; it depends. If there are dangling, accessible references to deleted DOM nodes, their associated event handlers will still reside in memory, along with the rest of their properties. Even if this is not the case, the scope created by the event handler functions might still be in use and in memory.

In most cases (and happily ignoring IE6) it is best to just trust the Garbage Collector to do its job, Javascript is not C after all. However, in cases like the last example, it is important to write destructor functions of some sort to implicitly shut down functionality.

More Related Contents:

  1. Check if an image is loaded (no errors) with jQuery
  2. How can I change an element’s class with JavaScript?
  3. How do I get the value of text input field using JavaScript?
  4. jQuery.click() vs onClick
  5. Force DOM redraw/refresh on Chrome/Mac
  6. Converting HTML string into DOM elements?
  7. Using jQuery to test if an input has focus
  8. Detect click outside React component
  9. Get next / previous element using JavaScript?
  10. How to detect online/offline event cross-browser?
  11. What is innerHTML on input elements?
  12. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  13. How to create Document objects with JavaScript
  14. Adding an onclick event to a table row
  15. In Javascript, can you extend the DOM?
  16. Unable to understand useCapture parameter in addEventListener
  17. Does javascript process using an elastic racetrack algorithm
  18. Setting focus to iframe contents
  19. Get DocType of an HTML as string with Javascript
  20. Does the onchange event propagate?
  21. Change ‘s option and trigger events with JavaScript
  22. Can I apply CSS to the elements within an iframe?
  23. Changing the order of elements
  24. Should I use document.createDocumentFragment or document.createElement
  25. createElement vs. createElementNS
  26. Drop event not firing in chrome
  27. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  28. Is it possible to get element’s numerical index in its parent node without looping?
  29. getElementsByClassName() with two classes
  30. What is the difference between `firstChild` and `firstElementChild`?

Leave a Comment