addEventListenerで関数に引数を設定する

addEventListenerでイベントを設定する時に関数に引数を渡したいということがあったので、設定する方法を調べました。

サンプルコード

ボタンクリックでconsoleを出すサンプルで試してみます。

<button id="btn">ボタン</button>

まずは特に引数を設定しない場合です。

var name = '天宮';
var target = document.getElementById('btn');

target.addEventListener('click', greeting);

function greeting(event) {
    console.log(event);
    console.log(this);
}

addEventListenerの関数に引数は設定していませんが、関数には引数にイベントの情報がオブジェクトで入ってきます。
addEventListenerの関数に引数を設定しないデモページ
addEventListenerで設定した関数はイベントの情報のオブジェクトのみを引数として受け入れるようで、調べた限りでは関数に引数を設定して値を渡すというのは難しそうでした。

代替案として最初に思いつく方法は、addEventListenerの関数内で関数を呼び出す方法です。

var name = '天宮';
var target = document.getElementById('btn');

target.addEventListener('click', function() {
	greeting(name);
});

function greeting(name) {
    console.log(this);
    console.log(name + 'さん、おはようございます');
}

これで関数に引数を設定することができますが、イベント自体を解除したい場合などいくつか問題があります。
関数内で関数を呼び出すデモページ

別の代替案として、addEventListenerの関数部分にオブジェクトを指定することもできるようなので、そのオブジェクトで値を渡すことができます。
オブジェクトの場合はhandleEvent()が必要で、このメソッドが関数として機能するようです。

var name = '天宮';
var target = document.getElementById('btn');

target.addEventListener('click', {
    val1: name,
    handleEvent: greeting
});

function greeting(event) {
    console.log(event);
    console.log(this);
    console.log(event.currentTarget);
    console.log(this.val1 + 'さん、おはようございます');
}

この指定方法の場合、関数内でのthisがaddEventListenerで指定したオブジェクトになります。
今回の場合、this.val1で渡した値を取得できます。
オブジェクトで指定するデモページ

注意点として、元々はthisでクリックしたボタンが取得できていたのに対して、変更後はオブジェクトの取得となっているため、thisの中身が変わっています。
元々のthisのようにイベント対象12行目のevent.currentTargetのようにすることで取得できます。