1118073 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

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

2013.03.30
XML
カテゴリ:JavaScript

JavaScriptの勉強の備忘録

 

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

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

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

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

失敗例1:文字列で

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

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

img.onclickはnullのまま。

関数しか設定できない?

 

失敗例2:そのまま引数渡す

img.onclick = func(i);

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

つまり意味ナッシング

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

 

 

失敗例3:クロージャ

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

  img.onclick = function(){

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

  } 

};

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

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

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

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

 

 

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

上手く行ったのは

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

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







最終更新日  2013.04.24 19:20:18
コメント(0) | コメントを書く


PR

X

サイド自由欄

フリーページ

カレンダー

カテゴリ

日記/記事の投稿

楽天カード


Copyright (c) 1997-2021 Rakuten, Inc. All Rights Reserved.