勉強したことのメモ

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

  関連記事

jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...

Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非 ...

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法

JavaScriptのalert / confirmはブラウザによって表示位置や ...

JavaScriptで英字を大文字⇔小文字に変換する方法

JavaScriptで英字を大文字⇔小文字に変換したかった。以下に対応方法をメモ ...