Home > スポンサー広告 > User JavaScript - イベントバブリングのテスト

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/52-2b62a628
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScript - イベントバブリングのテスト

Home > user javascript > User JavaScript - イベントバブリングのテスト

User JavaScript - イベントバブリングのテスト

user javascript

Operaでイベントのターゲットフェーズとバブリングフェーズを調べてみた

DOM 2 Events のイベントモデルにおいて、あるノードでイベントが発生すると、そのノードの祖先ノードのイベントリスナが呼び出されるキャプチャリングフェーズ、そのノード自身のイベントリスナが呼び出されるターゲットフェーズ、再び祖先ノードのイベントリスナが呼び出されるバブリングフェーズと、3 段階にわたってイベントが伝播していきます。

DOM Events とブラウザの実装: Days on the Moon

第6回 イベントハンドラから脱却しよう:ITproの図2を見ると分かるかも。DOM Level 3 Events draftの図だとさらに分かりやすい。

addEventListenerメソッドの第3引数を'false'にすると、キャプチャリングフェーズは行われず、イベントターゲットのイベントリスナーが実行される。その後、イベントターゲットから documentノードに向かってツリーをたどっていき、セットされたイベントリスナーを実行する。

イベントターゲットのイベントリスナーだけ実行したい時は、event.stopPropagation() メソッドでバブリングフェーズを停止する。

Operaのページのヘッダ('top'idの div要素)をクリックすると次のようになった。
イベントが発生したノードから documentノードまでのイベントフロー
イベントフェーズの種類イベントが伝播したノードイベントが発生したノード
target DIV (id = top) DIV (id = top)
bubbring DIV (id = wrap3) DIV (id = top)
bubbring DIV (id = wrap2) DIV (id = top)
bubbring DIV (id = wrap1) DIV (id = top)
bubbring BODY (id = operacom) DIV (id = top)
bubbring HTML DIV (id = top)
bubbring #document DIV (id = top)

この例では、イベントが発生したノードは最も子孫の要素ノードになっている。

ターゲットフェーズ、バブリングフェーズを調べるスクリプト

クリックすると、イベントが発生したノードから documentノードまでのイベントフローをダイアログに表示する。

// ==UserScript==
// @include *
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    // すべての要素にクリックイベントのリスナーをセット
    var all = document.getElementsByTagName('*');
    for ( var i=0; i<all.length; i++) {
        all[i].addEventListener('click', eventlist, false);
    }
    // ドキュメントにもクリックイベントのリスナーをセット
    document.addEventListener('click', eventlist, false);
    var list='';

    function eventlist(e){
        var eventphasetype = ['','capturing','target','bubbring'];
        // イベントフェーズの種類と、イベントが伝播したターゲットノード
        list += eventphasetype[e.eventPhase]+' , '+e.currentTarget.nodeName;
        if (e.currentTarget.id) {
            list += ' (id=' + e.currentTarget.id +')';
        }
        if (e.currentTarget.className) {
            list += ' (class=' + e.currentTarget.className +')';
        }
        // イベントが起きたノード
        list += ' , '+e.target.nodeName;
        if (e.target.id) {
            list += ' (id=' + e.target.id + ')';
        }
        if (e.target.className) {
            list += ' (class=' + e.target.className + ')';
        }
        list += '\n';
        
        // ドキュメントまでイベントが伝播したら、ダイアログを表示
        if ( e.currentTarget.nodeName == '#document' ) {
            alert(list);
            list = '';
        }
        e.preventDefault();
    }
}, false);

preventDefault()でイベントをキャンセルしているからデフォルトの動作は起きない。例えば、リンクをクリックしてもページは開かない。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/52-2b62a628
Listed below are links to weblogs that reference
User JavaScript - イベントバブリングのテスト from Karafuto Blog

Home > user javascript > User JavaScript - イベントバブリングのテスト

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。