質問: 下記の結果が「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したときのイベントを上記のように実装する場合、これをループで書こうとしたのですが(というか、それが本質問を投稿した経緯なのですが)、どのように書けばいいのでしょうか?
回答: > > 下記の結果が「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回連続で出力されます。 ``` 4 5 ``` これは、同じイベントリスナが4回登録されているためです。 単純な回答をするなら「for文の中での変数の出力より、イベント定義を繰り返すほうがおかしいです。」となります。 イベントリスナの登録/解除についても再確認されると良いでしょう(MDN イベントリファレンス)。 追記) id属性に数字のサフィックスがある仕様なら、イベントリスナ内で、ターゲット要素のid属性値を文字列処理する方法もありそうですが、次の質問・回答が類似する内容かもしれません。 onclickの登録に関して。 ご参考になれば。