Namespaced Events in jQuery

Es ist wirklich einfach, einen Event-Listener in jQuery hinzuzufügen. Es ist genauso einfach, einen Event-Listener zu entfernen. Sie möchten vielleicht einen Listener entfernen, weil Sie für dieses Ereignis keine Aktionen mehr ausführen möchten, um den Speicherverbrauch zu reduzieren, oder beides. Aber nehmen wir an, Sie haben mehrere Listener für dasselbe Ereignis angehängt. Wie entfernen Sie nur einen davon? Namespacing kann helfen.

Schauen wir uns den Code an.

$("#element")
  .on("click", doSomething)
  .on("click", doSomethingElse);

Sowohl doSomething als auch doSomethingElse werden ausgelöst, wenn das von uns ausgewählte Element angeklickt wird. Das ist gut. Es ist ein Vorteil der Verwendung von jQuery zum Binden von Ereignissen im Vergleich zum sehr altmodischen onclick, das zuvor deklarierte Event-Handler überschreiben würde.

Nehmen wir nun an, Sie möchten den ersten dieser Event-Listener entfernen, den, der doSomething auslöst. Wie machen Sie das?

$("#element").off("click");

Seien Sie vorsichtig, das würde beide Handler entfernen, was nicht das ist, was wir wollen.

Glücklicherweise nimmt jQuery denselben zweiten Parameter mit .off() entgegen, wie auch mit .on().

$("#element").off("click", doSomething);

Das ist großartig, wenn Sie eine Referenz auf eine tatsächliche Funktion haben, die Sie als diesen Parameter übergeben können. Aber was ist, wenn Sie diese Referenz nicht haben? Entweder weil Sie nicht wissen, was sie ist, oder weil Sie eine anonyme Funktion als Handler verwendet haben, wie hier:

$("#element")
  .on("click", function() { 
     console.log("doSomething");
   });

Wie können Sie diesen sicher entfernen, ohne versehentlich andere Klick-Handler zu entfernen? Namespaced Events!

Anstatt nur click als Namen des Ereignisses zu verwenden, können Sie click.namespace verwenden.

$("#element")
  .on("click.myNamespace", function() { 
     console.log("doSomething");
   });

Jetzt können Sie .off() mit genau diesem Event-Namen verwenden, um *nur* diesen zu entfernen.

$("#element").off("click.myNamespace");

Nur eine dieser coolen, nützlichen Dinge in jQuery. Selbst mit modernem Event-Binding mit addEventListener und removeEventListener wäre das etwas knifflig (glaube ich).

Ich habe es kürzlich in diesem Bookmarklet verwendet, das ich zur Überprüfung der Zeilenlänge erstellt habe. Ich wollte im Grunde ein mouseenter-Ereignis für jedes einzelne Element auf der Seite binden (mittels Delegation) und dann, wenn eines angeklickt wird, beide Ereignisse aufheben. Aber ich wollte vorsichtig sein, nichts zu entfernen, was ich nicht selbst gebunden hatte. Daher Namespacing!