勉強したことのメモ

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

  関連記事

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

JavaScriptの変数宣言であるvar / let / constの使い分けについて

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...