javascript - 具有独特匿名功能的 removeEventListener

Question

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

现在这个事件监听器需要调用创建它的对象实例的 delete 方法，并在其创建时分配值 i。因为事件在 Window 下，所以实例需要与 i 值一起传递给匿名函数。

因此，这为事件分配了一个非常独特的功能，并且因为 delete 方法将破坏包含监听器的元素，所以我想先将其删除；从我读过的内容来看，否则可能会导致泄漏(？)。我也在使用严格模式，所以不是 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 返回给任何请求它的对象/模块(或将匿名函数传回给它们)。

// 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 的好方法。