.bind() メソッドで追加されたイベント リスナーを削除するにはどうすればよいですか?

Bind() で追加されたイベント リスナーの削除

JavaScript でイベント リスナーを操作する場合、不要になったイベント リスナーを削除することが重要です。特に、.bind() メソッドを使用して追加された場合はそうです。

.bind() とイベント リスナー

.bind() メソッドは、次の新しい関数を作成します。特定のコンテキストがバインドされています。これにより、関数が最初に定義されたコンテキストの外で関数を呼び出すことができます。以下の例では、

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

.bind(this) は、clickListener 内の this キーワードが MyClass インスタンスを参照するようにする新しい関数を作成します。

リスナーの削除

この例のボタンを無効にするには、イベント リスナーを削除する必要があります。ただし、.bind() は新しい関数参照を作成するため、元の関数を単純に削除することはできません。

解決策: 関数参照を保存します

解決策は、関数参照を保存することです。イベント リスナーとして追加する前に、変数内の .bind() によって返された関数参照:

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

ここで、保存された参照を使用してリスナーを削除できます:

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

その他のメソッド

上記のメソッドは .bind() で追加されたリスナーを正しく削除しますが、推奨される代替方法はありません。

以上が.bind() メソッドで追加されたイベント リスナーを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。