JavaScript で「bind()」を使用するときにイベント リスナーを効果的に削除するにはどうすればよいですか?

bind() によるイベント リスナーの削除

JavaScript では、addEventListener() メソッドを使用してイベント リスナーを要素にアタッチできます。ただし、bind() メソッドを使用してリスナー関数をオブジェクトにバインドする場合、リスナーの削除が困難になる可能性があります。

一般的なアプローチの 1 つは、バインドされたリスナー関数のリストを維持することです。これにより、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>

別のアプローチは、次の解決策で提案されているように、バインドされた関数参照を変数に割り当てることです。

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

バインドされた関数を直接使用すると、バインドされたリスナーのリストを維持する必要がなくなり、削除プロセスが簡素化されます。

以上がJavaScript で「bind()」を使用するときにイベント リスナーを効果的に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。