javascript - 具有独特匿名函数的removeEventListener

Question

我有一个对象，它生成 HTML 元素，这些元素也与该对象的数组连接，假设我们有一个它的实例。因此，当它创建元素时，它还会将以下事件监听器分配给元素的嵌套部分(类为 uploadDelete)。

现在这个事件监听器需要调用创建它的对象实例的delete方法，并在创建时指定i的值。由于事件位于 Window 下，因此需要将实例与 i 值一起传递给匿名函数。

因此，这为事件分配了一个非常独特的功能，并且因为删除方法将销毁包含监听器的元素，所以我想首先将其删除；据我所知，否则可能会导致泄漏(？)。我也使用严格模式，所以不是arguments.callee。

file.display.getElementsByClassName('uploadDelete')[0].addEventListener('click',
(function(that,i){
    return function() {
        that.delete(i);
    };
})(this,i), false);

我尝试了很多不同的事情，但是当我开始在函数内部的函数内部有一个匿名函数，然后在监听器中调用该函数时，我想我应该在这里询问。我可能可以通过更改其他代码来解决整个问题，但如果可以回答这个问题，它仍然会有所帮助。

---

在 Norguard 的回答的帮助下，这就是我最终所做的事情。由于唯一性源于一个名为 file 的对象，因此我刚刚创建了一个新的 file 属性来存储该函数:

file.deleteFunction = (function(that,i){
    return function() {
        that.delete(i);
    };
})(this,i);

file.display.getElementsByClassName('uploadDelete')[0].addEventListener('click',file.deleteFunction, false);

然后调用的删除函数会删除事件监听器。

Answer 1

一种相对轻松的方法可能是在负责添加和删除监听器的范围内创建一个对象，该对象构建一个 ID(无论是序列号还是非 ID)，并将存储监听器在对象中的任何内容， ID，将 ID 返回给请求它的任何对象/模块(或将匿名函数传递回给它们)。

// trivial example
var listeners = {},
    i = 0,


add = function (context, func, closure) {
    var enclosed = (function (closure) {
        return function () { /* ... */; func(); };
    }(closure)),
    index = i;

    context.addEventListener("...", enclosed, false);
    listeners[index] = enclosed;
    i += 1;
    return index;
};

add 现在将添加您的监听器，但还会将您传递到 addEventListener 的函数存储到 listeners 对象中。 如果您需要对 i 的引用，如果您需要的话，您已经在闭包中获得了它。

现在，当您删除内容时，您只需查找保存在 listeners[i] 中的函数即可。

如果您不想将充满这些内容的表保存在一个位置，无论出于何种原因，另一种方法是捕获 return 语句，而不是返回 i，而是返回函数；

// inside of your module
// I'm not usually crazy about `this`, without doing something particular with it,
// but hopefully it illustrates my point
this.cached_func = add(this.el, this.callback.bind(this), this.secret);

所以现在，当需要删除所有内容时，并且您想要关闭监听器......

remove(this.cached_func);

综上所述，您所读到的泄漏仍然是可能的，但罪魁祸首是 IE6/7(及更早版本)。
随着人们远离不良浏览器，这一点变得不那么重要。
事实上，鼓励 IE6 中的内存转储可能只是鼓励人们不使用 IE6 的好方法。