勉強したことのメモ

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の三項演算子

いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...

JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法

JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...

JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法

1位から20位のランキング内でJavaScriptを用いてランダムに表示させたか ...

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...