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>
関連記事
-
-
javascriptのtry文
javascriptとかjQueryを使ってて、Firefox,chromeはい ...
-
-
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...
-
-
JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法
JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...
-
-
PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法
PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...
-
-
Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...