WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:onBlurの発生タイミングについて

0:[投稿] ぱんだ [2002/09/06 10:12 ][環境:WIN+IE WIN系+Java]

ぱんだです。
いつも勉強させて頂いています。

今回、onBlurイベントについて質問です。
onBlurイベントは「onBlur=""」が設定されたelement
からフォーカスが離れた瞬間に発生するのでしょうか?
それとも、フォーカスが離れ、次のフォーカスの場所が決まった時に
発生するのでしょうか??
後者の場合、「次のフォーカスの場所」を拾うことができるのか
が現在問題になっています。

私個人では前者の動きになると思っているのですが
確認の為に投稿させていただきました。
前者の動きの場合、「次のフォーカスの場所」を拾うことも
当然不可能になると思うのですが。。。
ご存知の方がいらっしゃいましたら、ご教授ください。


1:[回答] JTR [2002/09/06 12:03 ]

>私個人では前者の動きになると思っているのですが
私もそのように思っています。


2:[完了] ぱんだ [2002/09/06 13:36 ]

自己回答です。

あるテキストフィールドAにonBlurを設定し、
あるボタンBにonFocusを設定してみました。

すると、Aにフォーカスを当ててから
その状態のままBをクリックすると、BのonFocus
が先に呼ばれました。

このことから、次のフォーカスが決定しないと
onBlurイベントが発生しないと言う結論になりました。

JTRさん、レスありがとうございました。
私達の認識は間違っていたようですね^^;
しっかり勉強したいと思います。


3:[質問] ぱんだ [2002/09/06 14:25 ]

ぱんだです。
不思議な現象が起こりました。

<html>
<head>
<script language ="javascript">
    var test = "aaaaaaa";
    function bura(){
//        alert('フォーカス移動!');
        alert(test);
    }
    function fokasu(){
//        alert('フォーカス!');
        test = "bbbbbbb";
    }
</script>
</head>
<body>
<form name ="form">
<input type="text" name="txt" onBlur="bura();">
<input type="button" name="btn" value="button" onFocus="fokasu();">
</form></body>
</html>

上記のようなJavaScriptを組みます。
上記のままだと、bura()内のalert(test);
の結果は、「aaaaaaa」となります。

しかし、bura()内の「alert('フォーカス移動!');」
を有効にすると、alert(test);の結果は「bbbbbbb」になります。

fokasu()内の「alert('フォーカス!');」は有効にしてもしなくても、alert(test);の結果が変わりません。

どうやらonBlurの処理内にフォーカス移動がある場合、onFocusで
設定した値が有効になるようです。

上記以外に常にonFocusで設定した値が有効になる方法はないのでしょうか??
どのようにイベントが発生しているのかわからなくなってしまいました。この辺りも何かありましたら、ご意見を頂きたいと思います。

よろしくお願いします。


4:[回答] おーなーしぇふ [2002/09/07 18:48 ]

>> 2
> BのonFocus が先に呼ばれました。

> このことから、次のフォーカスが決定しないと
> onBlurイベントが発生しないと言う結論になりました。

この確認は alert の呼び出しでおこなったのではないでしょうか?
window.status で試すと、onBlurイベントが先に発生しているはずです。

つまり、onBlurイベントは、やはりフォーカスが離れた瞬間に発生するといえます。
※正確には「フォーカスが離れた動作が描写されたとき」かもですが。


alertとstatusで結果が異なる理由は、ひとことでいうと、alertのようなダイアログボックスの表示処理により、スクリプトエンジンがディスプレイエンジンに処理を明け渡すため、処理の流れが中断することによるのですが……。


ってひとことでは難しいので、以下を参考に。

■onClickイベントの発生について
http://www.parkcity.ne.jp/~chaichan/qanda/qa2876.htm

■時間がかかる操作中に表示を更新する
http://www.microsoft.com/japan/msdn/columns/dude/dude02262001.asp

とりあえず、次のスクリプト例でテストして、違いを確かめてみてください。

<html>
<head>
<script language ="javascript">
var test = "a";
var Cnt = 0;
var moveMess = 'bura():フォーカス移動!';
var focusMess = 'fokasu():フォーカス!';
var onclickMess ='oc();オンクリック';

//イベント処理は描画時に発生する?
    function bura(){
        Cnt++;
        
    //start
        status += "start:" + Cnt + " "  + test + " / ";

//alert
    //1)alert(1)を有効にした場合
    //alertを描画する(スクリプト→ディスプレイ)際に、ボタンのフォーカスが描画されるため、onFocusイベントの処理が発生? そのため、alert(1)より先にここでalert(2)が表示。但しalert(1)の表示内容は描画前に決定しているので、このあとのalert(1)では「test = "a"のまま。Cnt = 1。」となる?
    
    //2)alert(1)を無効にした場合(行頭//でコメントアウトする)
    //alertを描画しない=フォーカスが描画されない=onFocusイベントは、ここでは発生しない

//ここのalertを有効/無効にして、statusの表示の違いに注目して下さい。
//        alert( "alert(1):" + Cnt + " " + test + "\n" + moveMess );
    

//status
    //1)alert(1)を有効にした場合
    //Cnt = 2、test = "b"となる。
    //2)alert(1)を無効にした場合
    //Cnt = 1、test = "a"となる。
        status += " alert(1):" + Cnt + " "  + test + " / ";

        alert(test);
    }

    function fokasu(){
        Cnt++;

    //alert(2)
//        alert( "alert(2):" + Cnt + " " + test + "\n" + focusMess );
        status += " alert(2):" + Cnt + " "  + test + " / ";
        test = "b";
    }
    function Init(){
        test = "a";
        Cnt = 0;
        status = "";
    }
</script>
</head>
<body>
<form name ="form">
<input type="text" name="txt" onBlur="bura();">
<input type="button" name="btn2" value="button" onFocus="fokasu();">
<input type="button" name="inibtn" value="初期化" onClick="Init();">
</form>

</body>
</html>


5:[完了] ぱんだ [2002/09/09 11:25 ]

おーなーしぇふさん、ご丁寧な回答ありがとうございました。

実際、上記の確認はalertで行いました。
やはり、alertでは正確な動作は確認できないのですね。
うかつでした。

ご提示いただいたサンプルで更に解析していきたいと思います。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World