[解決済み] bindで追加されたイベントリスナーを削除する
2022-04-20 23:33:12
質問
JavaScriptで、bind()を使ってイベントリスナーとして追加された関数を削除する最も良い方法は何でしょうか?
例
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.myButton.addEventListener("click", this.clickListener.bind(this));
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", ___________);
};
})();
私が思いつく唯一の方法は、bindで追加されたすべてのリスナーを追跡することです。
このメソッドを使った上の例
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.clickListenerBind = this.clickListener.bind(this);
this.myButton.addEventListener("click", this.clickListenerBind);
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", this.clickListenerBind);
};
})();
何か良い方法はないでしょうか?
どのように解決するのですか?
イベントの追加と削除が同じ方法であることは@machineghostさんのおっしゃる通りなのですが、足りないのはこの部分でした。
<ブロッククオート
の後に新しい関数参照が作成されます。
.bind()
が呼び出されます。
参照 bind()は関数の参照を変更しますか?| 永久に設定する方法は?
ですから、追加したり削除したりするには、参照を変数に代入してください。
var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);
これは私にとっては予想通りの動作です。
関連
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み] .css()関数で追加したスタイルを削除するにはどうしたらいいですか?
-
[解決済み] jQueryイベントKeypress。どのキーが押されたか?
-
[解決済み] jQuery checkbox checked state changed event
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み】Vue.jsコンポーネントのメソッドをコンポーネントの外から呼び出す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vue+ElementUIによる大規模なフォームの処理例
-
vueにおけるv-forループオブジェクトのプロパティ
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] テスト
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】JavaScriptでインラインIF文の書き方は?