JavaScriptにてaddEventListenerで実行する関数に対して引数を渡す方法
JavaScriptにてaddEventListenerで実行する関数に対して引数を渡したい。addEventListener内にfunctionを書いてしまえば対応できそうなんだけど、可読性の問題で別の部分に関数を記述しておきたかった。以下に引数を渡す方法をメモ。
対応方法
パターン1
<button id="btn">btn</button> <script> const param = 12345; const btn = document.querySelector(`#btn`); btn.addEventListener(`click`, {param: param, handleEvent: testFunc}); testFunc(param); function testFunc( e ){ const param = ( this.param === undefined ) ? e : this.param; console.log(param); //12345 } </script>
パターン2
<button id="btn">btn</button> <script> const param = 12345; const btn = document.querySelector(`#btn`); btn.addEventListener(`click`, testFunc); btn.param = param; testFunc(param); function testFunc( e ){ const param = ( e.target === undefined ) ? e : e.target.param; console.log(param); //12345 } </script>
関連記事
-
-
3Dデータ(objファイル)をブラウザ上で表示する方法(JSC3D)
3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...
-
-
javascriptでスクロール
やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...
-
-
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...