‍🦔 【JavaScript】イベント重複の解消
作成日: 2022/01/23
2

仕事の案件で検索結果(xml読み込みで配列生成)をfilterしてforEach表示させるというのをやりましたが、検索ボタンを押す度に表示ソース内の各イベントが重複して付与されるエラーを発見。見た目は問題ないがconsole見たらclickやchangeなどの同一イベントが増える増える(笑)。ページ計測する箇所なのでこれは困る... と解消方法を調べてみたら、思いのほか簡単だった。
e.addEventListener('click', function () {})
ではなく
e.onclick = function () {}
が正解。
onclickやonchangeはイベントの重複が発生しないaddEventListenerは毎回律儀にeventをaddしてくれる、と。xml読み込みやjson読み込みでforEach表示させる場合、知らない間にイベントを重複させていないか注意が必要ですナ。

参考資料:【js】onclickとaddEventListenerの違い


JavaScriptとSassと英語が好き。