【JavaScript】addEventListenerにパラメータを渡す方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでaddEventListenerにパラメータを渡す方法をご紹介しています。

JavaScriptでaddEventListenerにパラメータを渡したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

addaddEventListenerにパラメータを渡すには

よく使われる手法として下記の方法が挙げられます。

即時関数内で関数を呼び出して引数を指定する
EventListenerオブジェクトを指定する

それぞれ詳しくご紹介します。

即時関数内で関数を呼び出して引数を指定する

addEventListenerの即時関数内で関数を呼び出し、引数に指定することで値を渡すことができます。

const myFunc = function(message){
    console.log(message);
}

window.addEventListener('load', function(){
    myFunc('ページの読み込みが完了しました');
}, false);

実行するとコンソールに下記も内容が出力されます。

ページの読み込みが完了しました

関数に値を渡すことができています。この方法でもやりたいことが実現できている場合は問題ないと思いますが、もう少しスマートな書き方がありますので、次項でご紹介します。

EventListenerオブジェクトを指定する

addEventListenerの第2引数にリスナー関数ではなくEventListenerオブジェクトを指定します。EventListenerオブジェクトはイベントリスナーに指定することができるオブジェクトです。必ずhandleEventメソッドを持つ必要があります。EventListenerオブジェクトをイベントリスナーの第2引数に指定すると、リスナー関数としてhandleEventメソッドが実行されます。プロパティを自由に持たせることができるので、これをパラメータとして利用します

実際にイベントリスナーの第2引数にEventListenerオブジェクトを指定してみます。EventListenerオブジェクトにはhandleEventメソッドとmessageプロパティを持たせます。

const obj = {
    message: 'ページの読み込みが完了しました',
    handleEvent: function(){
        console.log(this.message);
    }
}

window.addEventListener('load', obj, false);

実行すると下記の内容がコンソールに表示されます。messageプロパティに持たせた文字列が出力されていることが確認できます。

ページの読み込みが完了しました

EventListenerオブジェクトのhandleEventメソッドが実行され、プロパティに指定した文字列が出力されています。handleEventメソッドが呼び出すことなく実行されていますね。このように任意の値を持たせることでイベントリスナーにパラメータを渡すことが可能です。

addEventListenerの第2引数にはオブジェクトが指定できることがわかりました。オブジェクトが指定できるということは、下記のような記述も可能です。

const myFunc = function(){
    console.log(this.message)
}

window.addEventListener('load', {
    message: 'ページの読み込みが完了しました',
    handleEvent: myFunc
}, false);

handleEventメソッドの処理内容を直接記述してもいいかもしれませんね。

window.addEventListener('load', {
    message: 'ページの読み込みが完了しました',
    handleEvent: function(){
        console.log(this.message)
    }
}, false);

記述方法についてはエンジニアで好みが分かれる部分ですが、即時関数内で関数を呼び出すよりもEventListenerオブジェクトを指定する方がずっとスマートです。今後addEventListenerにパラメータを渡したい場合はEventListenerオブジェクトを使用するに心掛けたいと思います。