JS - Zu viele Listener für Dokument?

Question

Setup-

ich ein wiederverwendbares benutzerdefinierte Dropdown-Menü habe, ist der grobe Rahmen so etwas wie:

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

})(); 

Und jedes Menü mit etwas initialisiert wie:

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

Dieser Alles funktioniert wie erwartet.

Was ich

Ein Verhalten möchte ich jedes Menü haben möchten ist automatisch minimieren, wenn ein Klick das auftritt, ist nicht innerhalb des Menüs selbst.

Was ich

Statt einen einzigen Klick Zuhörer mit für das Dokument gemacht haben, und dann jedes Menü hinzufügen zu müssen und prüfen, wo der Klick wurde, habe ich beschlossen, das Dokument klicken Zuhörer hinzufügen innerhalb der _init Methode oben:

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

} 

auf diese Weise wird jedes einzelne Menü wird mit dem Verhalten automatisch initialisiert Dokument Klicks zu überwachen und entweder zu minimieren, wenn Klicke nicht im Menü ist, oder durchführt, was Aufgabe erforderlich ist.

Das funktioniert perfekt. Besonders interessant für mich ist, dass ich dynamisch neue Dropdown-Menüs erstellen kann, ohne sie zum Dokument-Klick-Listener hinzufügen zu müssen, und ich muss nicht mit event.stopPropagation(); kämpfen (ich würde meinen Fuß lieber abschneiden).

Aber ... Wird mein Computer explodieren?

Dies ist alles für eine einseitige Webanwendung, was bedeutet, dass viele Dutzende oder Hunderte dieser Menüs erstellt (und entfernt) werden können. Meine Sorge ist, dass sich all diese Klick-Listener von Dokumenten anhäufen und Leistungsprobleme verursachen.

Wenn ich so etwas wie ...

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

wird JS Garbage Collection wissen, dass es mit dem weg ein Dokument klicken Zuhörer tun kann? Oder wird der Hörer bis zum Ende der Tage bestehen? Wenn letzteres, gibt es irgendeine Möglichkeit, dass ich diesen bestimmten Listener entfernen kann, wenn das Menü entfernt wird?

Ein wichtiger Kaviat ist, dass das Menü wahrscheinlich nie direkt entfernt wird, sondern seine Eltern werden entfernt - so .remove() wird niemals auf das Menü direkt handeln.

Vielen Dank!

gerade getestet ...

habe ich zwei Menüs und dann einer von ihnen gelöscht (.remove()). Obwohl das eine Menü entfernt wurde, wird der Dokument-Klick-Listener weiterhin für jeden Klick ausgelöst.Dies scheint darauf hinzudeuten, dass die Müllsammlung nicht dieses Durcheinander handhaben wird, und ich werde mit unzähligen Zuhörern enden.

Also, was nun?

Answer 1

Geben Sie der Funktion einen Namen, damit Sie den Ereignislistener entfernen können.