防止DOM事件监听器内存泄漏的正确方法答案

【问题标题】：Correct way to prevent memory leaks on DOM event listener防止DOM事件监听器内存泄漏的正确方法
【发布时间】：2011-04-06 08:48:02
【问题描述】：

关于 DOM 的一些愚蠢问题，请不要恨我

由于某些原因，我需要向 addEventListener 传递一个匿名函数（主要是“传递”上下文变量），但是一旦调用的监听器就可以被删除，所以我想了解下面显示的代码是否是分离监听器的正确方法.

    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);

另一个问题，如果使用 removeChild 将元素菜单从其父级中删除，那么侦听器会自动删除吗？

【问题讨论】：

这似乎是必要的，正如 Mozilla 文档 developer.mozilla.org/en/DOM/… 所报告的那样，我正在使用 Firefox ;)

标签： javascript html dom addeventlistener

【解决方案1】：

我知道你想使用匿名函数，但使用命名函数可能会更好；它应该仍然可以访问相同的外部变量。

也许是这样的：

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);

哦，我不恨你:)

【讨论】：