eachメソッド＿JQueryで質問です><

現在、JQueryについて学習しています。記述はeach文の中にfocusメソッドとblurメソッドを入れています。
動作自体は問題がなく動いていますが、その仕組みがよく理解できません。

eachはセレクタで指定した要素数分、一度だけ処理をおこなうと理解していたのですが(li要素が2つあったとしたら2回each内を繰り返す。)下記を実行してみるとフォーカスしたとき、フォーカスが外れたときに処理が行われ、その処理を何度クリックしても、その動作を繰り返します。
/****************************************

jQueryのコード

*****************************************/

$(document).ready(function(){
$(".textbox").each(function(){
//＝＝＝＝＝＝1
var labelText=$(this).val();
$(this).focus(function(){
if($(this).val()==labelText){
$(this).val("");
}
}).blur(function(){
if($(this).val()==""){
$(this).val(labelText);
}
});
//＝＝＝＝＝2
});
});

/****************************************

　　ここからHTMLのコード -->

*****************************************/
<p>
<input type="text" class="textbox" size="40" name="name" id="name" value="お名前" />
</p>
<p>
<input type="text" class="textbox" size="40" name="email" id="email" value="メールアドレス" />
</p>
<p>
<input type="submit" class="button" value="送信" />
</p>


ためしに一度、テキストボックス以外をクリックした後にまた、テキストボックスをクリックしてもeachイベントが始まります。

//＝＝＝＝＝＝1から//＝＝＝＝＝2までの中身をただアラートを表示するだけならテキストボックスのかず分、表示してその処理は終わりました。
そして、再びeach内の処理を始めたかったらブラウザを更新するしかなかったのですが、
なぜ、なかのイベントをfocusとblurにすると何度もeach内の処理が行われるのでしょうか。

初心者で大変お恥ずかしい質問なのですが、ご教授頂けると大変助かります。
どうぞよろしくお願いいたします。

No.1 ベストアンサー 回答者： hitomura 回答日時： 2015/04/30 04:38

> eachはセレクタで指定した要素数分、一度だけ処理をおこなうと理解していたのですが(li要素が2つあったとしたら2回each内を繰り返す。

)
この認識はあっています。しかし、
> 下記を実行してみるとフォーカスしたとき、フォーカスが外れたときに処理が行われ、その処理を何度クリックしても、その動作を繰り返します。
で実行しているのは each 文の直接の内部ではありません。

メソッドチェーンしているので blur の方を抜かし片方だけにして書きますが、
$(this).focus(function(){
if($(this).val()==labelText){
$(this).val("");
}
});
という文は2つに分けて考えます。
一つは
$(this).focus(...);
で、これが each の中で実行されていることです。この focus() メソッドは、$(this) で表される要素にフォーカスがあった時に引数として渡された関数を実行するように設定します。いいですか、「設定」だけです。渡された関数はこのメソッドを実行した時点では実行されません。
もう一つは
function(){
if($(this).val()==labelText){
$(this).val("");
}
}
で、上記の通り each の中を実行しているときにはこの関数は実行されません。実行されるのは、上記にある通り「フォーカスがあった時」です。フォーカスがあったなら何度でも実行されます。

この回答へのお礼

hitomuraさんご回答いただきまして、ありがとうございます。
この focus() メソッドは、$(this) で表される要素にフォーカスがあった時に引数として渡された関数を実行するように設定するだけなのですね。
だからeachは、focusあると何度でも実行されるということがわかりました。
お忙しい中、ご回答ありがとうございました。

お礼日時：2015/05/03 15:39