Javascriptでイベントフロープロセスを説明する

JavaScriptでは、イベントフロープロセスは3つの概念で完了します-

• イベントターゲット- イベントが発生した実際のDOMオブジェクト。

• イベントバブリング- 以下に説明します

• イベントキャプチャ- 以下に説明します

イベントバブリングは、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>

イベントバブリング

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をクリックすると、ログが取得されます-

内部divがクリックされます

外側のdivをクリックします

イベントキャプチャ

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