for文の中でfocusイベントで変数の出力がおかしい？

Question

下記の結果が「2」になるのですが、なぜでしょうか？

for(var i=1; i<=1; i++) {
 $("#test").focus(function() {
  console.log(i);
 }
}

単純な疑問ですみません。

※追記です。

たとえば、

var i=1;
$("#test"+i).focus(function() {
console.log(i);
});

var i=2;
$("#test"+i).focus(function() {
console.log(i);
});

固定テキストに連番が付いたidの要素にfocusしたときのイベントを上記のように実装する場合、これをループで書こうとしたのですが（というか、それが本質問を投稿した経緯なのですが）、どのように書けばいいのでしょうか？

Comments

[y_waiwai]

２でなければ、なにになるはずと思ってらっしゃるのでしょうか

[avantgarden]

1です。どこでiが1増えてるのかが分からなくて…

[y_waiwai]

i++ してますね

Answer 1

下記の結果が「2」になるのですが、なぜでしょうか？

Uncaught SyntaxError: missing ) after argument list になるはずです。

正しくイベントハンドラを定義するコードで示すと、次のように置き換えることができます。

 var i=1;
 $("#test").focus(function() {
  console.log(i);
 });
 i++;

focusを得てイベントが発火するのは、i++ 以降なので、イベントハンドラから参照するi は「2」になっています。

for文の中でfocusイベントで変数の出力がおかしい？

ご質問に挙げられたコードの for の条件式を、例えば i<=4 に変えてみてください。

for(var i=1; i<=4; i++) {
 $("#test").focus(function() {
  console.log(i);
 })
}

このときは focus を得ると 「5」が 4回連続で出力されます。

④ 5

これは、同じイベントリスナが４回登録されているためです。

単純な回答をするなら「for文の中での変数の出力より、イベント定義を繰り返すほうがおかしいです。」となります。
イベントリスナの登録/解除についても再確認されると良いでしょう（MDN イベントリファレンス）。

追記）

id属性に数字のサフィックスがある仕様なら、イベントリスナ内で、ターゲット要素のid属性値を文字列処理する方法もありそうですが、次の質問・回答が類似する内容かもしれません。
onclickの登録に関して。 ご参考になれば。

Comments

[avantgarden]

詳細にご説明いただきありがとうございます。

コメント欄にコードが挿入できないので、本文に追記しました。
イベントリスナをループで書く方法が分かりません。

Uncaught SyntaxError: missing ) after argument list

については、コードの誤植でした。
すみません。ご指摘ありがとうございます。

Answer 2

このforループを抜けたときはiは２になってます。
このイベントはいつ実行されるのか考えてみるといいかと。

Answer 3

あるあるネタですね
forとvarの特徴です。
letにすると1になります

Comments

[yambejp]

初期値を入れて、条件が正ならループして評価式を実行します
i=1で一度ループしたので一回りするとiは2になっています。
focusした時点でiを参照すれば2になります

[avantgarden]

ご回答ありがとうございます。
なるほど…。自分でも調べてみます。