勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにてaddEventListenerで実行する関数に対して引数を渡す方法

  JavaScript

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

  関連記事

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() ...