Wie entferne ich Ereignis-Listener effektiv, wenn ich „bind()' in JavaScript verwende?

Ereignis-Listener-Entfernung mit bind()

In JavaScript kann die Methode addEventListener() verwendet werden, um Ereignis-Listener an Elemente anzuhängen. Wenn Sie jedoch die bind()-Methode verwenden, um eine Listener-Funktion an ein Objekt zu binden, kann das Entfernen des Listeners zu einer Herausforderung werden.

Ein gängiger Ansatz besteht darin, eine Liste gebundener Listener-Funktionen zu verwalten. Dies ermöglicht eine einfache Entfernung, indem die gleiche Funktionsreferenz für die Methode „removeEventListener()“ bereitgestellt wird.

<code class="javascript">// Constructor
MyClass = function() {
    this.myButton = document.getElementById("myButtonID");
    this.listenerList = [];

    this.listenerList.push(this.myButton.addEventListener("click", this.clickListener.bind(this)));
}

// Prototype method
MyClass.prototype.clickListener = function(event) {
    console.log(this); // must be MyClass
}

// Public method
MyClass.prototype.disableButton = function() {
    this.listenerList.forEach((listener) => removeEventListener('click', listener));
}</code>

Ein alternativer Ansatz besteht darin, die gebundene Funktionsreferenz einer Variablen zuzuweisen, wie in der Lösung vorgeschlagen:

<code class="javascript">var boundClickListener = this.clickListener.bind(this);
this.myButton.addEventListener("click", boundClickListener);
this.myButton.removeEventListener("click", boundClickListener);</code>

Durch die direkte Verwendung der gebundenen Funktion vermeiden Sie die Notwendigkeit, eine Liste der gebundenen Listener zu verwalten, was den Entfernungsprozess vereinfacht.

Das obige ist der detaillierte Inhalt vonWie entferne ich Ereignis-Listener effektiv, wenn ich „bind()' in JavaScript verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!