javascript - 文档的听众太多？

Question

设置

我有一个可重用的自定义下拉菜单，粗略的框架是这样的:

var List = (function() {

    // Custom list prototype stuffs...

    function ListObj(el, options) {     
        this._init(el);
    }

    ListObj.prototype._init = function(el) {
        var self = this;
        self.menu = el;
    }   

    // Expose an init function
    return {
        init : function(el, options) {
            new ListObj(el, options);
        }
    };

})();

每个菜单都用类似的东西初始化:

var ddlist = document.querySelector('.ddlist');
DDList.init(ddlist, options);

这一切都按预期工作。

我想要什么

我希望每个菜单都具有的一种行为是，如果发生不在菜单本身内的点击，则自动最小化。

我做了什么

我决定在上面的 _init 方法中添加文档点击监听器，而不是为文档添加一个单击监听器，然后必须添加每个菜单并检查点击位置:

ListObj.prototype._init = function(el) {
    var self = this;
    self.menu = el;

    document.addEventListener('click', function(e) {
        var el = e.target;

        if(self.menu === el || self.menu.contains(el)) {
            // Click was inside menu
            // Perform whatever tasks
        }else {
            // Click was outside of (this) menu, so minimize
            self.menu.minimize();
        }
    });

}

这样，每个单独的菜单都会自动初始化为监视文档点击的行为，如果点击不在菜单内则最小化，或者执行任何需要的任务。

这非常有效。我特别感兴趣的是，我可以动态创建新的下拉菜单，而不必将它们添加到文档点击监听器中，而且我不必与 event.stopPropagation(); 打交道(我'我宁愿砍掉我的脚)。

但是...我的电脑会爆炸吗？

这都是针对单页 Web 应用程序的，这意味着可以创建(和删除)数十个或数百个这样的菜单。我担心所有这些文档点击监听器会堆积起来并导致性能问题。

如果我做类似...

document.getElementById('someMenu').remove();

JS 垃圾回收会知道它可以取消单文档点击监听器吗？还是听者会坚持到天尽头？如果是后者，有什么方法可以在删除菜单时删除那个特定的监听器？

一个重要的 caviate 是菜单可能永远不会被直接删除，而是它的父级将被删除 - 所以 .remove() 永远不会直接作用于菜单。

非常感谢!

刚刚测试...

我创建了两个菜单，然后删除了其中一个 (.remove())。即使删除了一个菜单，每次单击仍会触发其中的文档单击监听器。这似乎表明垃圾收集不会处理这个烂摊子，我最终会得到无数的听众。

那么，现在呢？

Answer 1

为函数命名，这样您就可以删除事件监听器。

ListObj.prototype._init = function(el) {
    var self = this;
    self.menu = el;
    self.click_handler = function(e) {
        var el = e.target;
        if (!document.contains(self.menu)) { // This element has been removed from DOM
            document.removeEventListener("click", self.click_handler);
            return;
        }
        if(self.menu === el || self.menu.contains(el)) {
            // Click was inside menu
            // Perform whatever tasks
        }else {
            // Click was outside of (this) menu, so minimize
            self.menu.minimize();
        }
    };
    document.addEventListener("click", self.click_handler);

}