Home > スポンサー広告 > User JavaScript - イベントキャプチャのテスト

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

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

Home > スポンサー広告 > User JavaScript - イベントキャプチャのテスト

Home > user javascript > User JavaScript - イベントキャプチャのテスト

User JavaScript - イベントキャプチャのテスト

user javascript

Operaでイベントのキャプチャフェーズを調べてみた

User JavaScript - イベントバブリングのテストを書いたので、今度はイベントキャプチャを調べた。

キャプチャリングフェーズを動作させるには、addEventListenerメソッドの第3引数を'true'にする。バブリングフェーズとは反対に documentノードからターゲットフェーズのノードに向かってツリーをたどっていき、セットされたイベントリスナーを実行する。ターゲットフェーズのノードのイベントリスナーは実行されない。

Operaのページのヘッダ('top'idの div要素)をクリックすると次のようになった。
キャプチャリングフェーズ
イベントフェーズの種類イベントが伝わったノードイベントが発生したノード
capturing #document DIV (id=top)
capturing HTML DIV (id=top)
capturing BODY (id=operacom) DIV (id=top)
capturing DIV (id=wrap1) DIV (id=top)
capturing DIV (id=wrap2) DIV (id=top)
capturing DIV (id=wrap3) DIV (id=top)
キャプチャリングフェーズを調べるスクリプト

クリックするとキャプチャリングフェーズをダイアログに表示する。

// ==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, true);
    }
    // ドキュメントにもクリックイベントのリスナーをセット
    document.addEventListener('click', eventlist, true);
    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 += '\r\n';
        // イベントが伝わったノードとイベントが発生したノードの親ノードが同じになったら、ダイアログを表示
        if ( e.currentTarget == e.target.parentNode) {
            alert(list);
            list = '';
        }
        e.preventDefault();
    }
}, false);

イベントが伝わったノードとイベントが発生したノードの親ノードが一致したらイベントフローのリストを作るのを止めているため、本当にイベントがターゲットフェーズのノードまで伝わっていないのかこのスクリプトでは分からないが、キャプチャリングフェーズでイベントが伝わっていくのを分かりやすく見せるため、こうした。

キャプチャリングフェーズを調べるもっと簡単なスクリプト

ダイアログが何度も出てうるさいが、キャプチャリングフェーズがどこまで伝わっているか分かるスクリプトも書いといた。

クリックするとキャプチャリングフェーズが終わるまで何度もダイアログが出る。

// ==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, true);
    }
    // ドキュメントにもクリックイベントのリスナーをセット
    document.addEventListener('click', eventlist, true);

    function eventlist(e){
        var eventphasetype = ['','capturing','target','bubbring'];
        // イベントフェーズの種類と、イベントが伝わったターゲットノード
        var 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 + ')';
        }

        // ダイアログを表示
        alert(list);
        e.preventDefault();
    }   
}, false);

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/53-e36a49c7
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。