addEventListenerで関数に引数を渡す

addEventListenerでイベントをバインドする時にハマった事があるので書いておきます。

ハマった内容

とりあえずコードを見て下さい。

var btn = document.querySelector('.jscBtn');
// clickFunction に引数を渡したい
btn.addEventListener('click', clickFunction, false);

function clickFunction(value){
    console.log(value):
}

clickFunction関数でvalueを使うため、addEventListener時に引数として渡そうとしていますが、上手くいっていないパターンです。

大体うまくいってる例

以下のようにしたら、うまく行きそうな気がしますね。

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', function(){
    // clickFunction に引数を渡す
    clickFunction('my name'):
}, false);

function clickFunction(value){
    console.log(value): // 'my name'
}

関数に変数を渡すところまでは上手くいっていますが、別の問題が出てきます。以下のコードを見てください。

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', function(){
    clickFunction('my name'):
}, false);

function clickFunction(value){
    console.log(value): // 'my name'
}

// クリックイベントを解除したいが、うまくいかない
btn.removeEventListener('click', clickFunction , false);

イベントをバインドする事は出来るものの、解除（アンバインド）する事が出来ません。

成功例

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', clickFunction, false);
btn.eventParam = 'my name';

function clickFunction(event){
    console.log(event.target.eventParam): // 'my name'
}

イベントをバインドしたDOMオブジェクトのパラメータに引数を入れておいて、イベント発火時に参照する形です。
コメントで頂いたアドバイスを元に修正を加えてみました。removeEventListenerでイベントを解除出来るようにもしています。

index.html

<button class="jscBtn" data-name='testName'>Click</button>
<button class="jscRemoveEventBtn">removeEvent</button>

index.js

const btn = document.querySelector('.jscBtn');
const removeEventBtn = document.querySelector('.jscRemoveEventBtn');

const myEvent = function(event){
    console.log(event.target.dataset.name);
}

btn.addEventListener('click', myEvent, false);
removeEventBtn.addEventListener('click', function(){
    btn.removeEventListener('click', myEvent);
}, false);

デモ

気になる点

windowオブジェクトにイベントをバインドする時も、windowオブジェクトに関数の引数を入れる方法で実装は出来るものの、完全にアンチパターンなので他の方法を模索しています。

「俺はこうやってるぞ」等、より良い方法があれば教えて頂けたら嬉しいです。