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>
関連記事
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
-
-
JavaScriptの変数宣言であるvar / let / constの使い分けについて
JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...