刪除子功能事件偵聽器

Question

在構建擴展的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來實現，因為我需要引用相關的__DateField對象。

如何從document刪除該功能？

我看過各種線程，它們說無法檢查通過'addEventListener`添加的事件偵聽器，盡管想知道它們是否已過時，因為Firebug可以列出它們...

Answer 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;
        }
    }
})();