删除子函数事件侦听器

时间:2015-03-20 10:27:40

标签: javascript event-handling listener

在构建扩展的input字段(复杂的日期选择器)时,我需要使用两个关键的事件监听器。一个附加到输入字段,并启动接口。这很容易。

第二个附加到document,以便关闭复杂的叠加层。点击叠加层,它什么都不做。单击外部:叠加层消失,输入字段的值更新。

还需要从document中删除事件侦听器。

这一切都很简单......如果它不是基于对象结构的话。我不是在说一个独立的功能。我正在调用与该字段关联的数据对象的子函数(该字段无法再引用该字段)。

__DateField.prototype.activate = function () {
…
var t = this;
window.setTimeout(function () { document.addEventListener("click", function (ev) { t.closeDateSelector(ev) }, false); }, 0);
…
}

(我还没弄清楚为什么事件附件需要嵌套在setTimeout中,但如果我不这样做,它会立即调用它。)

无论如何,问题是我无法成功调用document.removeEventListener(),因为我的初始函数不同。

另外,我无法通过将该函数作为独立函数附加来实现它,因为我需要对相关__DateField对象的引用。

如何从document删除该功能?

我看过各种线程,说没有办法检查通过'addEventListener`添加的事件监听器,但是想知道它们是否可能已经过时了,因为Firebug可以列出它们......

1 个答案:

答案 0 :(得分:1)

要删除它,你必须有一个对该函数的引用,所以问题归结为:我如何保留对该函数的引用?

最简单的答案,因为你已经拥有了一个方便的对象,如果你可以依赖this在删除时的正确性,那么该对象就是一个属性:

__DateField.prototype.activate = function () {
    // …
    var t = this;
    window.setTimeout(function () {
        t.listener = function (ev) {
            t.closeDateSelector(ev)
        };
        document.addEventListener("click", listener, false);
    }, 0);
    // …
};

// To remove
__DateField.prototype.deactivate = function() {
    if (this.listener != null) {
        document.removeEventListener("click", this.listener, false);
        this.listener = null;
    }
};

或者,如果由于某种原因这是一个问题,您可以在范围函数中使用变量:

(function() {
    var listener = null;

    __DateField.prototype.activate = function () {
        // …
        var t = this;
        window.setTimeout(function () {
            listener = function (ev) {
                t.closeDateSelector(ev)
            };
            document.addEventListener("click", listener, false);
        }, 0);
        // …
    };

    // Later, when removing
    function removeIt() {
        if (listener != null) {
            document.removeEventListener("click", listener, false);
            listener = null;
        }
    }
})();