JavaScript のイベントリスナ関連
2022/06/18
結論から言うと、
- あるDOMに登録されているイベントを参照する方法はなさそう。 Devtools 限定ならば
getEventListener()が使えるようですがプレーンではないので通常は使用不可 - 「呼び出し時に一度しか実行させない」というフラグはあるようですが、「イベントバインド時に後付けでバインドされた同じイベントリスナが複数回呼ばれるときに抑制して一回のみにする」のはなさそう
- 今回は Mutation Observer で後付けしたイベントリスナで、しかもユーザ操作で絞り込みなどをした際にイベントをバインドしていたので「実際に呼び出されようが呼び出されまいが複数回イベントリスナが登録される」ケース
addEventListenerでは追加の挙動になるが、onclickならば上書きの挙動になる。今回はこれで対処
onclick などヒントになった記事
- [JavaScript]設定済みのonclick等イベントを削除する4つの方法
- JavaScriptでの無名関数の利用 : JavaScript | iPentec
- EventTarget.removeEventListener() - Web API | MDN
- イベントの扱い (概要) - イベントリファレンス | MDN
その他
- アクセシブルじゃないクリックイベントを発見する
- 【Javascript】「イベント」情報を取得する方法 - renoji.com
- JavaScript | イベントの伝搬をキャンセルする(stopPropagation,stopImmediatePropagation)
- 【JavaScript】イベントリスナーの引数(e)～トラブル回避の備忘録～ | Logical Studio Blog
- JavaScriptでイベントリスナーの処理をキャンセルしたい時に扱うメソッドの使い分け | Tech dig
- 複数の同一のイベントリスナーの登録について調べた - hajimeta
- addEventListener（removeEventListener、useCapture、stopPropagationなど）・カスタムイベント使い方 簡単なまとめ - Qiita
- JavaScriptのaddEventListenerで関数に引数をわたす方法(bind) | devsakaso
- JavaScriptのaddEventListener()で関数に引数を渡しつつ解除もしたい – Blog
- JavaScript | イベントの複数指定と上書きをする方法 | ONE NOTES
- addEventListener の第3引数が拡張されてるという話 - Qiita
- 【JavaScript】イベントのthisとbind | とものブログ
- 初心者による DOM イベントを使った処理 - Qiita
- 設定したイベントリスナーを解除する | GRAYCODE JavaScript