JavaScriptのキャプチャおよびバブリングディスカッション

 < DIV ID = "DIV" > 
     < 入力タイプ= "ボタン" 値= "バナナ" ID = "バナナ"  /> 
</ DIV > 

このページでは、我々は次のコードを追加します。

VAR BTN =のdocument.getElementById（ 'バナナ' ）;
        VAR DIV =のdocument.getElementById（ 'DIV' ）; 

        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'BTN' ）; 
        }、真）。
        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ 'バブル'、 'BTN' ）; 
        }、偽）。
       
        div.addEventListener（ 'クリック'、機能（）{ 
            はconsole.log（ 'キャプチャ'、真）。
        div.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ 'バブル'、 'DIV' ）; 
        }、偽）。

キャプチャイベントに本部のボタンと、我々は次のように一度に実行されているの最初の結合、その結果、次のとおりです。

キャプチャのdiv
BTNキャプチャ
バブルBTNの
バブルのdiv

>キャプチャBTN - - >バブリングBTN - >バブリングのdivそれは、キャプチャのdivに動作して見ることができます。

私たちは、次のようにイベントバインドコードを変更するためには変更されました：

VAR BTN =のdocument.getElementById（ 'バナナ' ）;
        VAR DIV =のdocument.getElementById（ 'DIV' ）; 
     
        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ 'バブル'、 'BTN' ）; 
        }、偽）。
        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'BTN' ）; 
        }、真）。
       
       
        div.addEventListener（ 'クリック'、機能（）{ 
            はconsole.log（ 'バブル'、偽）。
        div.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'DIV' ）; 
        }、真）。

実行結果を見てください：

キャプチャのdiv
BTNバブル
BTNキャプチャ
バブルのdiv

この場合、結果はdiv要素をキャプチャすることです - > BTNをバブリング - >キャプチャBTN - >のdivを泡立てます。

誰にも結合優先すべき者に関連しているイベントとイベントのキャプチャおよび結合の実行シーケンスの順序をバブリング、最後の撮影素子において：結論を推測しています。

 

私たちは、ページのコードを変更するように変更します：

 < DIV ID = "DIV" > 
            < DIV ID = "DIV1" > 
                < 入力タイプ= "ボタン" 値= "バナナ" ID = "バナナ"  /> 
            </ DIV > 
        </ DIV > 

変更イベントの結合コードを変更するには：

VAR BTN =のdocument.getElementById（ 'バナナ' ）;
        VAR DIV =のdocument.getElementById（ 'DIV' ）;
        VAR DIV1 =のdocument.getElementById（ 'DIV1' ）; 
     
        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ 'バブル'、 'BTN' ）; 
        }、偽）。
        btn.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'BTN' ）; 
        }、真）。
       
       
        div.addEventListener（ 'クリック'、
            console.log（ 'バブル'、 'DIV' ）; 
        }、偽）。
        div.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'DIV' ）; 
        }、真）。
        

        div1.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ 'バブル'、 'DIV1' ）; 
        }、偽）。
        div1.addEventListener（ 'クリック'、関数（）{ 
            にconsole.log（ '捕獲'、 'DIV1' ）。）;

実行するために結果]ボタンをクリックします。

divのキャプチャ
 キャプチャDIV1の
BTNバブルを
BTNキャプチャ
バブルDIV1の
バブルのdiv

この場合、結果は次のとおりです。キャプチャDIV - >キャプチャDIV1 - >バブリングBTN - >キャプチャBTN - >バブル - > DIV1 - >バブリングDIV。

他の要素は、優先すべき人を拘束し、実行中の結合順序の実装に関連する唯一の最後に撮影した要素、イベントのシーケンスとバブリングとキャプチャイベントをバブリング最初のキャプチャ後の順序に従っている人。