Events and DOM Elements

Question

Let's assume that I have a page with a two column layout where the left column is a set of links and it loads the associated html page/template in the right column when that link is clicked.

Upon loading a template, there's a template handler that gets initialized as a singleton via requirejs and it defines some methods and handlers like:

SomePage.prototype.saveHandler: function(e) { ... }; // Page handler has a handler

SomePage.prototype.initialize: function() {
    $('#btnSave').on('click', saveHandler);
}

Then, I'm attaching DOM events through an initialize method every time the page loads.

SomePage.initialize(); // This attaches the click event

Now, when I click another link on the left, a different template page is loaded and the above process repeats for that page.

I'm wondering what happens to the click event that was attached earlier to the btnSave element? Is it now a dangling event handler in the jQuery cache?

If I try to remove it when the same page loads again, will it actually remove the original event?

$('#btnSave').off('click', saveHandler);

Does executing the following block prevent memory leaks / dangling references?

// The potential problem here is that btnSave is part of the newly loaded template 
// and not the element i attached the handler to earlier (which doesn't exist anymore)
$('#btnSave').off('click', saveHandler);

$('#btnSave').on('click', saveHandler); 

What is the best way to ensure I don't end up with dangling references and memory leaks. This is a potential question for plain javascript too. My understanding is that the above will not work when the template page is refreshed. I am going experiment with it in the meanwhile, but it would be nice to know how the experts handle this. Thanks!

Answer 1

Have a look at this slide from Andy Osmani a javascript guru. You will find the answer about memory leak and circular references here: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass