ワナビから貴方へ　独り言の吐き溜め

JavaScriptの勉強の備忘録

エレメントにonclickイベントハンドラを設定する方法　その３

イベントハンドラに引数つきで関数を設定するにはちょっと工夫が必要になる

普通にやろうとして失敗しまくった

ローカル変数のiを引数として渡したい時

失敗例１：文字列で

img.onclick = 'hoge.func(' + i + ')';

HTMLタグに指定するように指定できるかと思ったが

img.onclickはnullのまま。

関数しか設定できない？

失敗例２：そのまま引数渡す

img.onclick = func(i);

これだと設定した瞬間実行され、その返り値がimg.onclickに設定される

つまり意味ナッシング

設定するのは関数であって、実行結果を設定するわけじゃない

失敗例３：クロージャ

for(var i = 0;i<5;i++){

  img.onclick = function(){

    func(i);//実際の関数

  } 

};

パッと見良さそうに見えてアウト

実行結果は全てfunc(5)になってしまう

なぜなら実行される時、つまり関数ブロックから参照される時、

ローカル変数であるiは５になってしまっているから

ということで、もうひと工夫必要っぽい

上手く行ったのは

関数ブロック本体からiを参照しないようにさらにクロージャをかませる方法

もっといい方法あるかもしれないけど