Comment supprimer les écouteurs d'événements ajoutés avec la méthode bind() en JavaScript ?

Suppression des écouteurs d'événements ajoutés avec Bind()

Question :

En JavaScript, comment pouvons-nous supprimer efficacement les écouteurs d'événements ajouté à l'aide de la méthode bind() ?

Introduction :

La méthode bind() vous permet de créer une nouvelle fonction avec un contexte spécifié, en liant le mot-clé this à un objet particulier. Ceci est couramment utilisé pour garantir que les méthodes appelées par les écouteurs d'événements ont accès au contexte correct.

Exemple :

Considérez le scénario suivant :

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

Discussion :

Une solution possible consiste à garder une trace de chaque écouteur ajouté avec bind(), mais cette approche est lourde et sujette aux erreurs.

Solution optimale :

Une solution plus efficace consiste à reconnaître que la méthode bind() crée une nouvelle référence de fonction. Par conséquent, pour supprimer l'écouteur, nous devons attribuer la référence à une variable :

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

Ensuite, lors de la désactivation du bouton :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!