JavaScript イベントキャプチャとイベントバブリング-jsチュートリアル-php.cn

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

little bottle

リリース： 2019-04-08 16:29:02

転載

2814 人が閲覧しました

#バブルの仕組み

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

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

その他のブラウザ:

p -> body -> html - > ; document -> window JavaScript イベントキャプチャとイベントバブリング

注:

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

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

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("点击了文档");
        }
    }

ログイン後にコピー

レンダリング

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

バブリングを防ぐ方法

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

標準ブラウザと 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("点击了文档");
    }
 }

ログイン後にコピー