removeEventListener具有唯一的匿名函数

时间:2013-03-20 21:23:03

标签: javascript function javascript-events unique anonymous

我有一个生成HTML元素的对象,它也与对象的数组相关联,让我们说我们有一个实例。因此,当它创建元素时,它还会将以下事件侦听器分配给元素的嵌套部分(类为uploadDelete)。

现在,此事件侦听器需要调用创建它的对象实例的delete方法,并在创建时指定i的值。因为事件在Window下,所以实例需要与i值一起传递给匿名函数。

因此,这为事件分配了一个非常独特的函数,并且因为delete方法将破坏包含侦听器的元素,所以我想首先删除它;从我所看到的,否则可能导致泄漏(?)。我也使用Strict Mode,所以不是arguments.callee。

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

我尝试了很多不同的东西,但是当我开始在函数内部有一个匿名函数,然后在侦听器中调用它时,我想我应该在这里问一下。我可能有一个解决整个问题的方法,改变其他代码,但如果可以回答这个问题,它仍然有用。


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

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

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

然后调用的delete函数将删除事件侦听器。

1 个答案:

答案 0 :(得分:2)

相对无痛的方法可能是在范围内创建一个负责添加和删除侦听器的对象,这些侦听器构建一个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,返回函数; < / p>

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