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);

というわけで、イベントハンドラのコールバック関数に引数を渡すことができましたとさ。