JavaScriptでのイベントバブリングとキャプチャとは何ですか？

イベントバブリングは、1つの要素が2番目の要素内にネストされ、両方の要素が同じイベント（クリックなど）のリスナーを登録したときにイベントハンドラーが呼び出される順序です。バブリングでは、イベントは最初に最も内側の要素によってキャプチャおよび処理され、次に外側の要素に伝播されます。

キャプチャを使用すると、イベントは最初に最も外側の要素によってキャプチャされ、内側の要素に伝播されます。

両方の例を見てみましょう。

次の両方の例について、次のHTMLを作成します-

例

<div id='outer' style='background-color:red;display:inline-block;padding:50px;'>
   Outer Div
<div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'>
   Inner Div
</div>
</div>

1。イベントバブリング

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('Inner div is clicked');
}, false);

上記のコードを実行して内部divをクリックすると、ログが取得されます-

Inner div is clicked

Outer div is clicked

2。イベントのキャプチャ

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('Inner div is clicked');
}, true);

上記のコードを実行して内部divをクリックすると、ログが取得されます-

Outer div is clicked

Inner div is clicked