Wie entferne ich Ereignis-Listener, die mit der bind()-Methode in JavaScript hinzugefügt wurden?

Mit Bind() hinzugefügte Ereignis-Listener entfernen

Frage:

Wie können wir in JavaScript Ereignis-Listener effektiv entfernen? mit der bind()-Methode hinzugefügt?

Einführung:

Mit der bind()-Methode können Sie eine neue Funktion mit einem angegebenen Kontext erstellen und das Schlüsselwort this daran binden ein bestimmtes Objekt. Dies wird häufig verwendet, um sicherzustellen, dass von Ereignis-Listenern aufgerufene Methoden Zugriff auf den richtigen Kontext haben.

Beispiel:

Stellen Sie sich das folgende Szenario vor:

(function () {
    // MyClass constructor
    MyClass = function () {
        this.myButton = document.getElementById("myButtonID");
        this.myButton.addEventListener(
            "click",
            this.clickListener.bind(this)
        );
    };

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

    // Method to disable the button
    MyClass.prototype.disableButton = function () {
        // Remove the event listener
        this.myButton.removeEventListener(
            "click",
            this.clickListener_________// Placeholder for missing argument
        );
    };
})();

Diskussion:

Eine mögliche Lösung besteht darin, jeden mit bind() hinzugefügten Listener im Auge zu behalten, aber dieser Ansatz ist umständlich und fehleranfällig.

Optimale Lösung:

Eine effizientere Lösung besteht darin, zu erkennen, dass die bind()-Methode eine neue Funktionsreferenz erstellt. Um den Listener zu entfernen, müssen wir daher die Referenz einer Variablen zuweisen:

const clickListenerBound = this.clickListener.bind(this);
this.myButton.addEventListener("click", clickListenerBound);

Dann beim Deaktivieren der Schaltfläche:

this.myButton.removeEventListener("click", clickListenerBound);

Das obige ist der detaillierte Inhalt vonWie entferne ich Ereignis-Listener, die mit der bind()-Methode in JavaScript hinzugefügt wurden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!