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>
関連記事
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
JavaScriptライブラリChart.jsでグラフの描写する方法
JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...