删除子函数事件侦听器答案

【问题标题】：Removing child-function event listeners删除子函数事件侦听器
【发布时间】：2015-05-23 17:38:05
【问题描述】：

在构建扩展的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 可以列出它们……

【问题讨论】：

我怀疑这可能与从添加的事件侦听器中调用进程嵌入的函数有关......
啊，抱歉，我记错了 DOM 事件规范。它说传播路径（事件将发生的元素）必须在一开始就确定而不是改变，但它并没有说处理程序必须是提前确定。因此，在冒泡事件的处理程序中，将同一事件的处理程序添加到祖先元素确实会导致该处理程序被触发。 Example | Relevant section of DOM events spec setTimeout 是解决这个问题的完美方式。

标签： javascript event-handling listener

【解决方案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;
        }
    }
})();

【讨论】：