addEventListener memory leaks

Question

When registering an event via addEventListener on an element, then delete that element without removing the event, and doing so repeatedly, would memory be \"leaked\"?

Answer 1

It shouldn't leak. The one browser that's infamous for leaking like hell when an event handler causes a host-object<>JS-object loop is IE (up to version 7), and IE (up to version 8) doesn't support addEventListener.

Leave this running and see how the browser's memory usage is affected in the long term, if you want to test it in a particular browser.

<div id="x"></div>
<script type="text/javascript">
    function replace() {
        var x= document.getElementById('x');
        if (x.firstChild!==null)
            x.removeChild(x.firstChild);
        var el= document.createElement('p');
        el.addEventListener('click', click, false);
        x.appendChild(el);
    }
    function click() {
        alert('click');
    };
    setInterval(replace, 1);
</script>

(To test it with a reference loop present, move the function click definition up into the replace body.)

Answer 2

You will get memory leak if you delete from DOM, elements that have attached listeners. But this only occurs in IE, Fx and others have advanced GC.

Often it happens, if you manipulate with DOM elements not via DOM, but like

el.innerHTML = ...

For example, YUI has custom realization setInnerHTML, to prevent memory leak in this case.