Hatena::ブログ(Diary)

yummy-yummy このページをアンテナに追加 RSSフィード

2008-10-14

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なんで、似たような感じでコードを書いてみる。

パターンその1

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

パターンその2

ちょっと呼び出し先の定義が複雑にはなるけど。こっちのほうがハンドラに記述するときはしっくり来るな〜。

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

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

edo_m18edo_m18 2008/12/26 14:00 これいいですねー!
前からやりたかったんですよね。
助かりましたー!

uriyuriuriyuri 2009/07/09 18:42 edo_m18さん
どうもです。僕も前から引数渡したかったんだけどやっとででました

TASTAS 2014/03/23 01:05 引数が渡せた・・・これでやっと安心して眠れます!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証