Javascriptでイベントハンドラのコールバック関数に引数を渡す
javascriptでゴリゴリコードを書いていると、最近のライブラリではコールバック関数を渡すのがけっこう日常茶飯事なようで、コールバック関数を渡すのはいいが、その関数に引数を渡してあげたい！！ってことがよくあるのですよ。
今までなんとか引数は諦めてしのいでたけど、どうも納得がいかないんで調べてみた。
例えばとあるボタンのイベントハンドラで、クリックした際にhogeというfunctionが実行されるようにしたいってな場合は、こんな感じで書きます。
var hoge = function(evt) { alert("hogehoge" + evt); } btn3 = document.getElementById("btn3"); btn3.addEventListener("click", hoge, true);
しかしこの「addEventListener」に引数を渡したくて、こんなん書いてみると。。。。
btn3.addEventListener(“click”, hoge(‘msg1’), true);
オンロード時に関数hogeが実行されてしまって、イベントハンドラに登録されてねぇよ～なんて状態になってしまいます。
え～、コールバック関数に引数ば渡せんやん！って思いつつ検索してたら、同じ悩みの人を発見！！（ActionScriptみたいだけど、、、）
addEventListenerで一緒に引数を渡したい — apeirophobia —
まぁ、基本ECMAScriptなんで、似たような感じでコードを書いてみる。
パターンその１
function action1(ev, msg1, msg2) { alert("event=" + ev); alert("msg1=" + msg1 + ", msg2=" + msg2); } btn1 = document.getElementById("btn1"); btn1.addEventListener("click", function(ev){action1(ev, 'hoge1', 'hoge2')}, true);
パターンその２
ちょっと呼び出し先の定義が複雑にはなるけど。こっちのほうがハンドラに記述するときはしっくり来るな～。
function action2(msg1, msg2) { return function(ev) { alert("event=" + ev); alert("msg1=" + msg1 + ", msg2=" + msg2); } } btn2 = document.getElementById("btn2"); btn2.addEventListener("click", action2('hoge1', 'hoge2'), true);
