0

Should I be removing dynamic clickHandlers to the dynamically created html tags or is it taken care of automatically by the garbage collector.

My primary browser is Safari (embedded in iOS app), but I think i read that IE has memory leak problem around this.

var li = document.createElement('li');
li.addEventListener('click', function(){});

so if this element was removed from DOM later on, should I delete the clickHandler, just in case please let me know how to property delete a clickHandler?

2
  • Make sure the element isn't referenced from any global variables, otherwise those will keep it from becoming garbage.
    – Barmar
    Sep 9, 2016 at 20:39
  • only the parent ul references as a child appendChild and once I remove child, the clickHandler will be garbage collected? no references from global.
    – user689751
    Sep 9, 2016 at 20:42

2 Answers 2

0
li.removeEventListener("click", function_name);

This will remove the event listener

Source: http://www.w3schools.com/jsref/met_element_removeeventlistener.asp

For anonymous functions, the point of them is really to have no reference and lacks a name, so for removeEventListener() you will need a named function.

3
  • what if I don't have the reference and function was provided inline, just like my example?
    – user689751
    Sep 9, 2016 at 20:41
  • About the garbage collection im not really sure on that. Sep 9, 2016 at 20:41
  • Im not sure about that case, You could make the inline function seperate but not sure about inline, I will do some more research Sep 9, 2016 at 20:43
0

If there are no references remaining to the element after you remove it, the GC should clean up handler functions that it references. So you shouldn't need to do anything.

But if IE has a bug along this way, you can use removeEventListener to remove the handler, but this requires that you use a named function, since you have to give the same function to removeEventListener as you did when you called addEventListener, and anonymous functions will never be the same as each other.

function myClickHandler {
    ...
}
var li = document.createElement('li');
li.addEventListener('click', myClickHandler);
...
li.removeEventListener('click', myClickHandler);
myClickHandler = null;
li.parentNode.removeChild(li);

myClickHandler = null; is needed because otherwise the function name will hold a reference to the handler function, so it won't be GCed.

If you have multiple LIs, and they're all using the same handler function, it shouldn't be necessary to do this. No matter how many LIs you have, they're all just referring to the same function, so it doesn't take up lots of memory.

2
  • will my anonymous function garbage collected if I simply remove this element from DOM?
    – user689751
    Sep 9, 2016 at 20:43
  • Yes it will, I added this to my answer.
    – Barmar
    Sep 9, 2016 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.