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のコード -->

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

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

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

お気を悪くされたら申し訳ないのですが、少し認識が間違っているように感じます。
この例で言うと、eachメソッドが毎回実行されているわけではありません。

jQueryのバージョンにもよるのですが、

lang
1var focusHandler = function(obj) { /* do something */ };
2$('.textbox').focus(focusHandler);        // (1)
3$('.textbox').on("focus", focusHandler);  // (2)

(1)と(2)は同じ働きをします。
blurイベントでも、clickイベントなどでも同様です。
つまりあなたのコードのeachメソッド内部では「labelTextという変数の定義をしてfocusイベントとblurイベントに関数を紐づけているだけ」です。
そして実際にfocusイベントやblurイベントが発生したときにその内部の関数が実行されます。
イベントが発生する度に何度でも同じ処理が実行されます。

JavaScriptでは一般的にイベント駆動で開発します。
ですからあなたのコードのようにeachメソッドで対象のすべての要素にハンドラを紐づけるようなコードになるわけです。
言ってしまえば$(document).ready(function(){});も「HTML文書が読み込まれた」ことによって発生するイベントに処理を結びつけているにすぎません。

蛇足になりますが、今回のようなケースの場合はplaceholder属性を用いることも検討できます。
勉強目的ではなく、かつHTML5未対応ブラウザも視野に入れているのであればそういうjQueryプラグインもあります。

投稿2015/04/29 15:30

htsign

総合スコア870

batakosan

2015/05/01 13:39

htsign様、ご丁寧なご回答いただきましてありがとうございました。「labelTextという変数の定義をしてfocusイベントとblurイベントに関数を紐づけているだけ」とご教授いただき、認識の違いが分かりました。 javaScriptではイベント駆動で開発をしていくので、eachをハンドラに紐づけていくのですね。ご教授いただきますまで、eachの意味がお恥ずかしながらよく分かっておりませんでした。この度は、お忙しい中、ご教授いただきまして誠にありがとうございました。

行動規範の内容に同意します