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でランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法
jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...
-
-
javascriptでのエラーログ
PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法
あるサイトのソースコードを拝見しているとjQueryで$.parseHTML() ...