javascript - Correct way to prevent memory leaks on DOM event listener - Stack Overflow

admin管理员组

文章数量:1386852

Some stupid question about DOM, please don't hate me

For some reasons I need to pass an anonymous function to addEventListener (mainly to "pass" context variables) but the listener once called can be removed so I want to understand if the code shown below is the correctly way to detach the listener.

    var item = document.createElement("div");
    item.addEventListener("click", function(event) {
        // do some stuff
        // remove listener otherwise we generate a memory leak
        item.removeEventListener("click", arguments.callee, false);
    }, false);

    var menu = document.getElementById("mymenu"); // some element
    menu.appendChild(item);

Another question, if the element menu is removed from its parent using removeChild the listener is removed automatically?

Some stupid question about DOM, please don't hate me

For some reasons I need to pass an anonymous function to addEventListener (mainly to "pass" context variables) but the listener once called can be removed so I want to understand if the code shown below is the correctly way to detach the listener.

    var item = document.createElement("div");
    item.addEventListener("click", function(event) {
        // do some stuff
        // remove listener otherwise we generate a memory leak
        item.removeEventListener("click", arguments.callee, false);
    }, false);

    var menu = document.getElementById("mymenu"); // some element
    menu.appendChild(item);

Another question, if the element menu is removed from its parent using removeChild the listener is removed automatically?

• javascript
• html
• dom
• addeventlistener

Share Improve this question Follow asked Aug 31, 2010 at 15:57 dafidafi 3,53222 gold badges3030 silver badges5252 bronze badges 1

• It seems necessary as reported on Mozilla docs developer.mozilla/en/DOM/… You are right I'm using Firefox ;) – dafi Commented Aug 31, 2010 at 17:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I know you want to use an anonymous function, but you may be better off with a named function; it should still have access to the same outer variables.

Perhaps this:

var item = document.createElement("div");
var listener = function(event) {
        // do some stuff
        // remove listener otherwise we generate a memory leak
        item.removeEventListener("click", listener, false);
    };
item.addEventListener("click", listener, false);

var menu = document.getElementById("mymenu"); // some element
menu.appendChild(item);

Oh, and I don't hate you :)

本文标签： javascriptCorrect way to prevent memory leaks on DOM event listenerStack Overflow