JavaScript Dom Operationでは、JSバブルイベントに間違いなく遭遇します。最も一般的なものは、図に示されているDivポップアップイベントです
灰色の部分をクリックすると、ポップアップウィンドウが消え、黒い部分をクリックしても効果はありません。
次のコードを使用して、JSのバブルイベントを分析します
HTMLコード：
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<Title> JSバブルイベント</title>
<link rel = "styleSheet" href = "style.css">
</head>
<body>
<div>
<H1> JSバブルイベント分析</h1>
<hr>
<div>
<ボタン>
私をクリックしてください！
</button>
</div>
</div>
<スクリプト>
var box = document.queryselector（ "。box"）、
btn = document.queryselector（ "。btn"）;
box.onclick = function（event）{
アラート（「私はdiv」）;
}
btn.onclick = function（event）{
アラート（「私はボタンです」）;
}
</script>
</body>
</html>
Firefoxブラウザのデフォルトの開発者ツールを使用すると、3DビューはDivレイヤーの順序を明確に見ることができます
図：
ボタンをクリックすると、「I Am a Button」がポップアップし、「I Am A Div」がポップアップします。これは、ボタンイベントが最初にトリガーされ、次にDiv Clickイベントの次のレイヤーがトリガーされるためです。
イベントのトリガーは、ファーストインファーストの原則です。
図：
その後、複数のイベントが競合をトリガーすることを望まない場合があるため、イベントにはStopPropagation（）があります。気泡を防ぐ方法。
リンクなど、一般的に使用されるイベントメソッドもあります。リンクをクリックすると、ジャンプしたくないので、event.preventdefault（）を使用します。方法
例コードは次のとおりです
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<Title> JSバブルイベント</title>
<link rel = "styleSheet" href = "style.css">
</head>
<body>
<div>
<H1> JSバブルイベント分析</h1>
<hr>
<div>
<ボタン>
私をクリックしてください！
</button>
<a href = "http://www.liteng.org" id = "link">私はリンク</a>です
</div>
</div>
<スクリプト>
var box = document.queryselector（ "。box"）、
btn = document.queryselector（ "。btn"）;
box.onclick = function（event）{
アラート（「私はdiv」）;
}
btn.onclick = function（event）{
アラート（「私はボタンです」）;
event.stoppropagation（）;
}
document.getElementById（ 'link'）。onclick = function（event）{
アラート（「私はリンクです」）;
event.preventdefault（）;
}
/*event.stoppropagation（）を区別します。およびevent.preventdefault（）;
前者は、イベントが泡立つのを防ぐためにStopPropagation（）方法を使用しています。
後者は、ハイパーリンクのブロックなどのデフォルトの動作をブロックすることです
*/
</script>
</body>
</html>
JSのバブル事件を完全に理解できますか？ご質問がある場合は、メッセージを残してください