JavaScriptでイベントリスナー(addEventListener)に指定する関数に「引数を渡す」方法

JavaScriptでイベントリスナー(addEventListener)を使って「特定の要素がクリックされたら関数を実行する」という処理をすることがあって、さらに「その関数に引数を渡したい」ということがありました。

今後も使うことがあると思いますので、やり方を以下にメモ書きました。機会がありましたらご参考ください。

JavaScriptでイベントリスナーに指定する関数に「引数を渡す」方法

codepenでサンプルを作りました。「change color」ボタンを押すと赤色のボックスの背景色が変わります。

HTML

<button id="button">change color</button>
<div id="box"></div>

CSS

button{
 margin-bottom:1rem;
}

#box{
 background:#c00;
 width:250px;
 height:200px;
}

JavaScript

let button = document.getElementById('button'); //idが「button」の要素を取得
let box = document.getElementById('box'); //idが「box」の要素を取得

//idが「button」の要素がクリックされたら実行
button.addEventListener("click", function() {
 changecolor('#0cc'); //関数「changecolor」に引数を指定
}, false);

function changecolor(code) {
 box.style.backgroundColor = code; //引数のカラーコードを背景色に指定
}

上のJavaScriptのコードを見ると「addEventListener」の書き方をちょっと工夫すれば、関数に引数を渡せるんだな～ってのが何となくわかりますね。

イベントリスナー(addEventListener)についての詳細はEventTarget.addEventListener – Web API インターフェイス | MDNに掲載されています。今回ご紹介した方法に類似したサンプルも公開されていますので、参考にしながら自分で作ってみるとより理解が深まると思います。