1.いわゆるイベントバブリングとは、イベントの実行が開始されると、ドキュメント内で最も深いネストレベルのノードによって受信され、ネストレベルの最も深いノードの父親>父親の父親まで伝播されることを意味します。 > ...最も外側までずっと
具体的なデモンストレーション
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="myLip">click</div>
</body>
</html>
当点击页面中的div元素,这个click事件会按照一个顺序来传播即:
1.<div>
2.<body>
3.<html>
4.document
単純に、最初のdiv要素で実行されるクリッククリックイベント、次にクリックイベントがDOMに伝播し、その過程で、クリックイベントノードがすべてのレベルで発生し、ドキュメントオブジェクトへの拡散を認識します。
クリックイベントがレベルごとに上向きに伝播すると同時に、各上位ノードでイベントがバブリングするプロセス
2.イベントキャプチャは、イベントバブリングの正反対です。ネストレベルが比較的低いノードは、最初にイベントを受信する必要があります。つまり、登録された要素に到達する前にイベントをキャプチャする必要があります。その後、シーケンスは次のようになります。
1.document
2.<html>
3.<body>
4.<div>
イベントキャプチャのプロセスでは、ドキュメントオブジェクトは最初にクリックイベントを受け取り、次にDOMツリーの順序に従い、実際にクリックイベントを登録した要素であるdiv要素にイベントが伝播されます。