Javascript のイベント キャプチャ、イベント バブリング、およびイベント委任メカニズム

コンセプト

イベントバブリング: イベントによってトリガーされた最も深い要素が最初にイベントを受け取ります。次に、その親要素、というように、ドキュメント オブジェクトが最終的にイベントを受け取るまで続きます。ドキュメントには html 要素から独立した視覚的表現はありませんが、依然として html 要素の親要素であり、イベントがドキュメント要素にバブルアップする可能性があります。
イベント攻略について気軽に語りましょう。
イベント キャプチャ: イベントは最初に DOM ツリーの最上位のオブジェクト (ドキュメント) で発生し、次に最も深い要素に伝播します。 (IE6 にはバブリングのみがあり、キャプチャはないことに注意してください)
イベント委任: イベント委任はバブリング原理を使用して、イベント監視をその親要素に変換すると思います。つまり、イベントを親要素にバインドし、イベントで子要素オブジェクトを作成し、それに対応する操作を実行します。利点: 1. パフォーマンスの向上 2. コードの量の削減

例

イベントバブリングの例 1

イベントはデフォルトでバブリングステージで実行されます
まず次のコードを見てください:

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        });

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        });

        oId3.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id3");
        });
    }</script><style type="text/css">
    *{margin: 0;padding: 0;}</style>
    <p id="box" style="background-color:#669;widht:600px; height:400px;">
    <p id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <p id="id3" style="background-color:#000;widht:300px; height:100px;">
        </p>
    </p></p></p>

id1、id2 をクリックします、id3 を順番に実行します。 効果は次のとおりです:

分析: id3 をクリックすると、id3 からバブリングが開始され、id3 にバインドされたイベントが実行され、次に id2 にバブリングされ、id2 より上のイベントが実行され、最後にid1 上のイベントを実行します。

イベントバブリングインスタンス2

次に、id2のバブリングを防止し始め、JSを次のように変更します

window.onload=function(){
        var oId1=document.getElementById('id1');        
        var oId2=document.getElementById('id2');        
        var oId3=document.getElementById('id3'); 

        oId1.addEventListener('click',function(e){
            console.log("点击了id1");
        });

        oId2.addEventListener('click',function(e){
            console.log("点击了id2");
            e.stopPropagation();

        });

        oId3.addEventListener('click',function(e){
            console.log("点击了id3");
        });
    }

</script>

このとき、id1、id2、id3を順番にクリックすると、実行効果は次のようになります:

イベントはid2に対して実行されるため、Bubblesではないため、id2またはid3をクリックしても、id1にバインドされたイベントは実行されません。

イベントキャプチャ例1

キャプチャフェーズでイベントが実行されることを確認するために、JSコードを次のように変更しました:

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        },true);

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id3");
        },true);
    }</script>

このとき、id1、id2、id3を順にクリックし、実行効果は次のとおりです:

分析: クリックすると、ルート要素から開始してイベントが実行されます。つまり、イベントがあれば、それが実行されます。

イベントキャプチャ例2

このとき、JSコードを次のように変更しました:

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        },true);

        oId2.addEventListener(&#39;click&#39;,function(e){
            e.stopPropagation();
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){

            console.log("点击了id3");
        },true);
    }</script>

このとき、id1、id2、id3を順番にクリックすると、実行結果は次のようになります:

現象を発見しました。id3をクリックすると、id1とid2にバインドされたイベントが実行されることがわかりました。なぜid3でイベントを実行しないのですか？バブリング e.stopPropagation(); をキャンセルすると、イベントのキャプチャも妨げられることがわかりました。

イベントのバブリングとキャプチャの例

次に、JS を次のように変更します:

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 


        oId1.onclick=function(){  //该事件在冒泡阶段执行
            console.log("点击了id1");
        }

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){

            console.log("点击了id3");
        },true);
    }</script>

このとき、id1、id2、id3 を順番にクリックすると、実行結果は次のようになります:

イベント委任インスタンス1

次のコードは、クリック イベントをボックスにバインドすると、e.srcElement を通じてどの要素がクリックされたかを取得できます。

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById(&#39;box&#39;);
        oBox.onclick=function(e){
            var curObj=e.srcElement;
            console.log(curObj.id);
        }
    }</script><style type="text/css">
    *{margin: 0;padding: 0;}</style>
    <p id="box" style="background-color:#669;widht:600px; height:400px;">
    <p id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <p id="id3" style="background-color:#000;widht:300px; height:100px;">
        </p>
    </p></p></p>

ボックスバインディングのクリックイベントでクリックされた要素を取得できることがわかります。

イベントデリゲーション例2

イベントデリゲーションにおけるバブリングの検証
上記のJSを以下のように変更します:

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById(&#39;box&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);

        oId2.onclick=function(e){
            e.stopPropagation();
        }
        oBox.onclick=function(e){
            var curObj=e.srcElement;
            console.log(curObj.id);
        }
    }</script>

この時点でクリックすると、id2とid3がe.srcElementから取得できないことがわかります。 id2のバブリングを止めたので。

上記は、JavaScript でのイベント キャプチャ、イベント バブリング、イベント委任メカニズムの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。