この記事では、JS のバブリング イベントとイベント キャプチャを例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:
概要
1. [myDiv] をクリックします。順序は、Div-Body-Html-Document-Window
2. 他の空白の場所をクリックします。順序は Html-Document-Window です
3. 続けて 2 回クリックすると、2 回連続して実行されます
4. バブリングの前提として、親も対応するイベントを定義します
より複雑な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 顶级
};
document.onclick = function(){
alert("Document"); // 次顶级
};
document.documentElement.onclick = function(){
alert("Html"); // 次次顶级
};
document.body.onclick = function(){
alert("Body"); // 次次次顶级
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
};
}
</script>
</head>
<body>
<div id="myDiv">点我</div>
</body>
</html>
概要
1. クリックの実行結果は、
Window - true
Document - true
Html - true
Body - true
Div - true
Div - falseです。
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2． jsコード配列 関係ありません
3. クリックイベントが定義されていない場合でも、クリックされていればキャプチャできます
バブリングを防ぐために再度改革
。概要
ウィンドウ - true
ドキュメント - true
Html - true
Body - true
Div - true
Div - false
Div - click
終了、フォローアップコンテンツなし
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
