javascript addEventListener memory-leaks question

Question

If I use addEventListener to register an event on an element, then delete the element without removing the event and I did this repeatedly could I create a memory leak ?

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.