JSイベントのキャプチャやイベントのバブリング？

定義

イベントは、2つの方法で渡しますバブリングとキャプチャ

イベントトリガー定義された要素のイベント配信順序。

あなたは<pは> <div>要素への要素は、ユーザーがクリックする<p>要素、「クリック」イベントの要素は、それをトリガーする場合は？

バブル、イベントの内部要素が最初にトリガされ、次いで即ち、外部要素をトリガ：クリックイベントの最初の要素がトリガされた<P>は、クリックイベントの<div>要素をトリガ

では、キャプチャ、その後、トリガ・イベント<p>要素をクリックし、クリックイベントをトリガするために、<div>要素：、イベントは第一の外部要素がトリガされますが、そのイベントは、内部の要素、すなわちがトリガされます

上巻は、addEventListener（）方法

この方法では、完全にサンのパラメータ、および最初の2つを使用して、我々は第三の焦点を見て、今

構文：

element.addEventListener（イベント、関数、 useCapture）

最初のパラメータが（例えば「クリック」又は「マウスダウン」など）イベントのタイプであります

二番目のパラメータは、イベントのトリガ機能の後に呼び出されます

3番目のパラメータは、イベントのバブリング又は捕捉を記述するために使用されるブール値です。このパラメータはオプションです。

例2弾

HTML

< テンプレート> 
    < divのクラス= "ホーム" > 
        < divの上記のid言及= "myDiv" > 
            < p型は上記のIDを述べ= "MYP" >段落をクリックして、私はバブリングました。</ p型> 
        </ divの> < BR > 
        < divの上記のid = "myDiv2" > 
            < p型以上のid言及= "myP2は" >段落をクリックして、私が捕獲されました。</ P > 
        </ DIV > 
    </ DIV > 
<

<スクリプト> 
    エクスポートデフォルト{ 
        名： "ホーム" 、
        マウントされた（）{ 
             のdocument.getElementById（ 'MYP'）のaddEventListener（ "クリック"、（）=>。{ 
                警告（ 'あなたはをクリックP要素！' ）
             }、falseに）; 
            のdocument.getElementById（ => 'myDiv'）のaddEventListener（ "クリック"、（。）{ 
                警告（ 'あなたはDIV要素をクリックしてください！' ）
            }、falseに）; 

            のdocument.getElementById（ 'myP2'）のaddEventListener（ " 」をクリックし、（）=>{ 
                アラート（「あなたはP2要素をクリック！' ）
            }、trueに）; 
            のdocument.getElementById（ ' myDiv2 '）のaddEventListener（ "クリック"、（）=>。{ 
                アラート（あなたがクリックDIV2要素「'！ ）
            }、trueに）; 
        } 
    };
 </ SCRIPT>

CSS

<スタイルスコープタイプ= "テキスト/ CSS"> 
.home { 
    マージントップ：200pxの。
    パディング左：800ピクセル ; 
    パディング右：800ピクセル ; 
} 
#myDiv、＃myDiv2 { 
    背景色：サンゴ。
    国境：1pxの固体 ; 
    パディング：は50px ; 
} 
</スタイル>

JSイベントのキャプチャやイベントのバブリング？

定義

上巻は、addEventListener（）方法

例2弾

パート3デモショー

おすすめ