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

WBOY

リリース： 2016-05-16 16:29:01

オリジナル

1688 人が閲覧しました

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

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

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

HTML コード:

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

<頭>

js バブリングイベント
<リンク 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() メソッドを使用します。

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

コードをコピー

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

<頭>

    js冒険泡イベント
    <リンク rel="スタイルシート" href="style.css">

js冒険泡イベント分析

    <スクリプト>
    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の冒険泡事件を完全に理解できるかどうか、疑いのある问就给我留言吧