Comment supprimer efficacement les écouteurs d'événements lors de l'utilisation de « bind() » en JavaScript ?

Suppression des écouteurs d'événements avec bind()

En JavaScript, la méthode addEventListener() peut être utilisée pour attacher des écouteurs d'événements aux éléments. Cependant, lorsque vous utilisez la méthode bind() pour lier une fonction d'écouteur à un objet, la suppression de l'écouteur peut devenir un défi.

Une approche courante consiste à maintenir une liste de fonctions d'écoute liées. Cela permet une suppression facile en fournissant la même référence de fonction à la méthode removeEventListener().

<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>

Une approche alternative consiste à attribuer la référence de fonction liée à une variable, comme suggéré par la solution :

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

En utilisant directement la fonction liée, vous évitez d'avoir à maintenir une liste d'écouteurs liés, simplifiant ainsi le processus de suppression.

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!