イベントハンドラに引数を渡す方法

javascriptのお話。(prototype.jsを使ってるよ)

まず、

function foo(i){
  alert(i);
}

ってなのがあって、

<div>
  <span onclick="foo(1);">いち</span>
  <span onclick="foo(2);">にー</span>
  <span onclick="foo(3);">さん</span>
</div>

ってやれば、イベントハンドラに引数をわたせる。

諸事情により、タグにonclickとか書きたくないとき、

function init(){
  var taglist = document.getElementsByTagName("span");
  for(var i = 0; i < taglist.length; i++){
       Event.observer(taglist[i], 
                                  "click",
                                  function(){
                                      alert("hello");
                                  },
                                  false);
  }
}

Event.observer(window, "load", init, false);

とか書けば、引数の必要のないイベントハンドラなら簡単に書ける。

でも、最初の例の用に引数を渡したい。そんなときは、

function init(){
  var taglist = document.getElementsByTagName("span");
  for(var i = 0; i < taglist.length; i++){
       Event.observer(taglist[i], 
                                 "click",
                                 function(in_i){
                                      return function(){
                                                        alert(in_i);
                                                  };
                                  }(i),
                                  false);
  }
}

Event.observer(window, "load", init, false);

javascriptすげぇ。
クロージャーって便利。