JSの泡立ちと捕獲とはどういうことですか?

JSの泡立ちと捕獲とはどういうことですか?
ネットで言っているのを見てもよく分かりません.もう一度整理してみます.参照:https://www.cnblogs.com/alvin...
発泡と捕獲とは、要素上のイベントがトリガされたとき、jsはイベントの2つの方向、またはプロセスを伝達することである.
前言:
例えば、このようなページとjsの方法があります.
Less:私はlessで書いています.もしless環境がないなら、この部分を無視してもいいです.

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $('lv1').addEventListener("click",()=>{console.log('lv1')},true);
    $('lv2').addEventListener("click",()=>{console.log('lv2')},true);
    $('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
//     () => {}   ES6           
//    
function () {
    console.log('lv1')
}

上のjsのすること:ページに載せる時、三つのdivにclickの傍受方法を追加して、自分がクリックされた時に自分のid値をコンサートで出力します.lv1は lv2を含み、lv2はlv3を含み、lv3をクリックすると、 lv2とlv1をもクリックした.lv3はlv2の内部にあり、lv3をクリックすると、自然にlv2とlv1をクリックした.3つのlv3イベントがトリガされます.これらの3つのイベントのトリガの順序は、いわゆるclickおよび である.
イベントトリガー経過の3段階:

キャプチャフェーズ:まず文書のルートノード によってイベントトリガーオブジェクトが外部からイベントオブジェクトをキャプチャする.

ターゲットを設定します.ターゲットイベントの位置を探して、イベントをトリガします.

発泡段階:ターゲットイベント位置からドキュメントのルートノード方向に遡り、内向的外部から泡が発生するイベントオブジェクト.

1.捕獲フェーズ
上記の例のように、documentをクリックしたとき、jsは文書の最上層から、外向内からクリックイベントの起源、つまりlv3を探します.この外向内のプロセスは、lv3-->lv1-->lv2であり、この3つのdivのclickイベントは、このプロセスに従って順次トリガされる.このトリガの方向はlv3の方向である.
2.発泡段階
クリックされたlv 3が見つかった後に、イベントが上に転送され、プロセスは -->lv3-->lv2であり、このとき、lv1、lv3、lv2のlv1イベントが順次トリガされる.これは内気外のトリガプロセスでclickと呼ばれる.
最も一般的なイベントバインディング方法のフォーマットをもう一度見てください.

element.addEventListener(event, function, useCapture)

このうち、 はブール値であり、イベントがuseCaptureでトリガされるか、 でトリガされるか、デフォルト値は であり、発泡時にトリガされることを表す.
このとき、上記の例で定義されているclick方法はfalseで実行されていることが分かります.

lv1
lv2
lv3

上記の例であれば、 の内容はこうです.

 window.onload = () => {
        $('lv1').addEventListener("click",()=>{console.log('lv1')},false);
        $('lv2').addEventListener("click",()=>{console.log('lv2')},false);
        $('lv3').addEventListener("click",()=>{console.log('lv3')},false);
    };

つまり、onload事件はclickでトリガされ、その結果が返ってきます.

lv3
lv2
lv1

締め括りをつける
泡立ちと捕獲の関係は、含まれる構造と含まれる構造の中だけに現れるので、兄弟関係はこのような関係はありません.泡が出るのと捕えるのは方向の違いだけです.