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

#バブルの仕組み

バブルからの水底は深いところから浅いところへ、そして頂上へと上昇し始めます。上昇する途中で、泡はさまざまな深さの水中を通過します。対応して、このバブルはここでのイベントに相当し、水は DOM ツリー全体に相当します。イベントは、DOM のルート ノードに渡されるまで、DOM ツリーの下部から層ごとに上に渡されます。子要素に親要素と同じイベントがある場合、子要素がトリガーされると親要素もトリガーされます。ブラウザによって、泡立ちの度合いが異なります:

IE 6.0:
p -> body -> html -> document

その他のブラウザ:

p -> body -> html - > ; document -> window

注:


すべてのイベントがバブルできるわけではなく、次のイベントはバブルしません:ブラー、フォーカス、ロード、アンロード

子要素に親要素と同じイベントがある場合、子要素がトリガーされると、親要素もバブリング メカニズムをトリガーします。バブリング イベント、次のコード:

HTML

<p id="father">
    <button id="btn">点击</button></p>

#CSS

father{        width: 300px;        height: 300px;        background-color: red;        margin:  auto;        }

JS

 window.onload = function () {
        var father = document.getElementById("father");        
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("点击了按钮");
        };
        father.onclick = function () {
            alert("点击了父标签");
        };
        document.onclick = function () {
            alert("点击了文档");
        }
    }

レンダリング

ボタンと赤い領域をクリックすると、イベントがレイヤーごとに渡されます。期待どおりの効果が必要な場合、イベントのバブルを防ぐにはどうすればよいでしょうか?

バブリングを防ぐ方法

標準ブラウザと IE ブラウザ

w3c:event.stopPropagation() proPagation
IE:event .cancelBubble = true

互換性のある記述方法if(event &&event.stopPropagation){ // w3c 標準 event.stopPropagation();

}else{ // IE シリーズ IE 678

event.cancelBubble = true;
}

バブリングをブロックした後



JS

window.onload = function () {
  var father = document.getElementById("father");  var btn = document.getElementById("btn");

   btn.onclick = function () {
      if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
           event.stopPropagation();
      }else{ // IE系列 IE 678
          event.cancelBubble = true;
           }
      alert("点击了按钮");
    };
   father.onclick = function () {
      if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
           event.stopPropagation();
       }else{ // IE系列 IE 678
           event.cancelBubble = true;
           }
      alert("点击了父标签");
   };
  document.onclick = function () {
      alert("点击了文档");
    }
 }

#その場所でのバブリング イベントを防止する必要がある場合は、バブリングを防止するメソッドを追加します。

バブリングを防止するメソッドを関数にカプセル化し、必要に応じて直接呼び出すことができます。

【おすすめコース:

JavaScript ビデオチュートリアル
】

以上がJavaScript イベントキャプチャとイベントバブリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。