勉強したことのメモ

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にて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

バニラJavaScriptにて「ipify API」を利用してユーザのIPアドレスを取得する方法

あるサイトでユーザのIPアドレスを取得したいというケースがあった。普段であればP ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...