夕暮ログ

C#やJavascript、最近はAndroidなんかも好きなtinqのブログ。「夕暮れログ」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ループ内でのイベント追加時の変数

はまったのでメモ。

javascriptのDOMで要素を追加するとき、イベントを設定する必要があります。
無名関数を使ってやるのが一般的です。
ですが、forで複数の要素に繰り返しイベントを追加した場合、変数を使っているとうまくいかない場合があります。
for(i = 0 ; i < 10 ; i ++)
{
 a = document.createElement("a");
 a.textContent = i + ",";
 a.addEventListener("click",function()
 {
  alert(i);
 },false);
 document.body.appendChild(a);
}
0~9までを表示し、クリックするとその数が表示されるというコードです。
このコード、一見よさそうだが、実際にクリックしてみると全部10になってしまいます。
これは、iが書き換えられるのが原因。全部が同じになる、という仕様があるのです。
こちらのサイト様の方法で解決できます。
ループとイベント登録 - いわぶろ(ろてん)
for(i = 0 ; i < 10 ; i ++)
{
 (function(){
 var j = i;
 a = document.createElement("a");
 a.textContent = j + ",";
 a.addEventListener("click",function()
 {
  alert(j);
 },false);
 document.body.appendChild(a);
 })();
}
追加する部分を無名関数でさらに囲って、その中で変数をコピーします。
(function()
{
 /* コード */ 
})()
とやると、その場で違う関数を実行できます。
でも、本当にジオログって使いにくい。そのうち、FC2あたりに移そう。
関連記事

コメント

ここをクリックしてコメントを投稿

非公開コメント

トラックバック

http://tinqwill.blog59.fc2.com/tb.php/10-e75e7fc9

« next  ホーム  prev »

プロフィール

tinq tinq(もしくはTinqWill)

Sky  For   Every 改装予定

プログラミングお勉強中の高校生。月一くらいは更新したい

最新記事

カテゴリ

月別アーカイブ

検索フォーム

最新コメント

リンク

最新トラックバック

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。