Was ist in JavaScript der beste Weg, um eine als Ereignis-Listener hinzugefügte Funktion mit bind () zu entfernen?
Beispiel
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.myButton.addEventListener("click", this.clickListener.bind(this));
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", ___________);
};
})();
Der einzige Weg, den ich mir vorstellen kann, besteht darin, jeden mit bind hinzugefügten Listener im Auge zu behalten.
Oberes Beispiel mit dieser Methode:
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.clickListenerBind = this.clickListener.bind(this);
this.myButton.addEventListener("click", this.clickListenerBind);
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", this.clickListenerBind);
};
})();
Gibt es bessere Möglichkeiten, dies zu tun?
javascript
events
listener
bind
Takfuruya
quelle
quelle
this.clickListener = this.clickListener.bind(this);
undthis.myButton.addEventListener("click", this.clickListener);
bindAll
Funktion, die die Bindungsmethoden vereinfacht. In Ihrem Objektinitialisierer müssen Sie lediglich_.bindAll(this)
jede Methode in Ihrem Objekt auf eine gebundene Version setzen. Wenn Sie nur einige Methoden binden möchten (was ich empfehlen würde, um versehentliche Speicherverluste zu vermeiden), können Sie sie alternativ als Argumente angeben :_.bindAll(this, "foo", "bar") // this.baz won't be bound
.Antworten:
Obwohl das, was @machineghost sagte, wahr ist, dass Ereignisse auf dieselbe Weise hinzugefügt und entfernt werden, war der fehlende Teil der Gleichung folgender:
Siehe Ändert bind () die Funktionsreferenz? | Wie dauerhaft einstellen?
Um es hinzuzufügen oder zu entfernen, weisen Sie den Verweis einer Variablen zu:
Das funktioniert bei mir wie erwartet.
quelle
.addEventListener(type, listener)
und.removeEventListener(type, listener)
fügen Ereignisse zu einem Element hinzu und entfernen sie. Für beide können Sie die in der Lösung beschriebene Funktionsreferenz alslistener
Parameter und"click"
als Typ übergeben. developer.mozilla.org/en-US/docs/Web/API/EventTarget/…Fügen Sie für diejenigen, die dieses Problem beim Registrieren / Entfernen des Listeners der React-Komponente zum / vom Flux-Speicher haben, die folgenden Zeilen zum Konstruktor Ihrer Komponente hinzu:
quelle
this.onChange = this.onChange.bind(this)
eigentlich war es das, wonach ich gesucht habe. Die Funktionthis
für immer gebunden :)Es spielt keine Rolle, ob Sie eine gebundene Funktion verwenden oder nicht. Sie entfernen es wie jeden anderen Ereignishandler. Wenn Ihr Problem darin besteht, dass die gebundene Version eine eigene eindeutige Funktion ist, können Sie entweder die gebundenen Versionen verfolgen oder die
removeEventListener
Signatur verwenden, für die kein bestimmter Handler erforderlich ist (obwohl dadurch natürlich andere Ereignishandler desselben Typs entfernt werden ).(Nebenbei bemerkt,
addEventListener
funktioniert nicht in allen Browsern. Sie sollten wirklich eine Bibliothek wie jQuery verwenden, um Ihre Ereignisverbindungen für Sie browserübergreifend durchzuführen. Außerdem verfügt jQuery über das Konzept von Ereignissen mit Namespace, die dies ermöglichen Sie müssen an "click.foo" binden. Wenn Sie das Ereignis entfernen möchten, können Sie jQuery mitteilen, dass "alle foo-Ereignisse entfernen", ohne den jeweiligen Handler kennen oder andere Handler entfernen zu müssen.)quelle
off
oderunbind
Methode gedacht haben . Um alle Listener eines Elements zu entfernen, müssen Sie sie verfolgen, wenn sie hinzugefügt werden (was jQuery oder andere Bibliotheken für Sie tun können).jQuery-Lösung:
quelle
Wir hatten dieses Problem mit einer Bibliothek, die wir nicht ändern konnten. Office Fabric-Benutzeroberfläche, was bedeutete, dass wir die Art und Weise, wie Ereignishandler hinzugefügt wurden, nicht ändern konnten. Die Art und Weise, wie wir es gelöst haben, bestand darin,
addEventListener
denEventTarget
Prototyp zu überschreiben .Dadurch wird eine neue Funktion für Objekte hinzugefügt
element.removeAllEventListers("click")
(Originalbeitrag: Click-Handler aus Stoffdialog-Overlay entfernen )
quelle
Hier ist die Lösung:
quelle
kann über ES7 verwenden:
quelle
Wenn Sie 'onclick' wie oben vorgeschlagen verwenden möchten, können Sie Folgendes versuchen:
Ich hoffe, es hilft.
quelle
Es ist schon eine Weile her, aber MDN hat eine super Erklärung dafür. Das hat mir mehr geholfen als das Zeug hier.
MDN :: EventTarget.addEventListener - Der Wert von "this" im Handler
Es bietet eine großartige Alternative zur handleEvent-Funktion.
Dies ist ein Beispiel mit und ohne Bindung:
Ein Problem im obigen Beispiel ist, dass Sie den Listener nicht mit bind entfernen können. Eine andere Lösung ist die Verwendung einer speziellen Funktion namens handleEvent, um Ereignisse abzufangen:
quelle