从动态元素中删除onClick

Question

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?

Answer 1

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.

Answer 2

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.