jsバブリングイベントを徹底分析_基礎知識

JavaScript で DOM 操作を実行すると、必ず js バブリング イベントが発生します。最も一般的なのは、図に示すように div ポップアップ イベントです。

灰色の部分をクリックするとポップアップウィンドウが消えますが、黒い部分をクリックしても何も起こりません。

次のコードを使用して、JS バブリング イベントを分析します

HTML コード:

コードをコピーします コードは次のとおりです:

<頭>


<リンク rel="スタイルシート" href="style.css">

                                                                                                                                                                                                                 

＆lt; button class = "btn"＆gt;
クリックしてください!

                                                                                       

<スクリプト>
var box=document.querySelector(".box"),
btn=document.querySelector(".btn");
box.onclick=関数(イベント){
alert("私は div");
}
btn.onclick=関数(イベント){
alert("私はボタンです");
}






Firefox ブラウザのデフォルトの開発者ツールの 3D ビューを使用すると、div レイヤーの順序を明確に確認できます

イラスト：

ボタンをクリックすると、「I am button」がポップアップし、次に「I am div」がポップアップします。これは、最初にボタン イベントがトリガーされ、次に次のレイヤー div クリック イベントがトリガーされるためです。

イベントのトリガーは先入れ先出しの原則に基づいています。

イラスト：

場合によっては、複数のイベントがトリガーされて競合が発生することを望まないため、イベントにはバブリングを防ぐ stopPropagation() メソッドがあります。 リンクなどの一般的に使用されるイベント メソッドもあります。リンクをクリックしたときにジャンプしたくない場合は、event.preventDefault() メソッドを使用します。

サンプルコードは次のとおりです

コードをコピー

コードは次のとおりです:

<頭>
   
   
    <リンク rel="スタイルシート" href="style.css">


   

       

js冒険泡イベント分析

       

---

       

           
                クリックしてください!
           
            http://www.liteng.org" id="link">我是链接
       

   

    <スクリプト>
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=関数(イベント){
        alert("我是div");
    }
    btn.onclick=関数(イベント){
        alert("我是ボタン");
        イベント.stopPropagation();
    }
    document.getElementById('link').onclick=function(event){
        alert("我是リンク");
        イベント.preventDefault();
    }
    /*区別event.stopPropagation();和event.preventDefault();
      前者はstopPropagation() を使用してイベント冒泡を阻止します
      後者は、超接続を阻止するなどの行為です
    */
   

小さな伙伴们がjsの冒険泡事件を完全に理解できるかどうか、疑いのある问就给我留言吧

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。