JavaScript のバブリングとキャプチャの概要 (コード付き)

この記事の内容は、JavaScript のバブリングとキャプチャの知識を紹介するものです (コード付き)。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

JS のバブリングとキャプチャとは何ですか?

バブとキャプチャとは、要素上のイベントがトリガーされたときに JS がイベントを配信する 2 つの方向、またはプロセスを指します。

前書き:

たとえば、このようなページと js メソッドがあります

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

<div>
    <div>
        <div>
            <div>

            </div>
        </div>
    </div>
</div>

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 の動作:
ページの読み込み時に、クリック監視メソッドを 3 つの div に追加します。クリックされたとき、独自の ID 値がコンソールに出力されます。

ページの構造は次のようになります: lv1 には lv2 が含まれ、lv2 には lv3 が含まれます。lv3 をクリックすると、lv3 は lv2 の中にあるため、実際には lv2 と lv1 をクリックします。lv3 をクリックすると、 lv2 と lv1、つまり lv3 をクリックすると、3 つのクリック イベントがトリガーされます。
これら 3 つのイベントが発生する順序としては、いわゆるバブリングとキャプチャです。

イベント トリガーの 3 つの段階:

1. キャプチャ ステージ: まず、ドキュメント document のルート ノードからイベントに移動します。トリガー オブジェクト、イベント オブジェクトを外側から内側にキャプチャします;
2. ターゲットの特定: ターゲット イベントの場所 (インシデントが発生した場所) を見つけて、イベントをトリガーします;
3. バブル ステージ: 次に、ターゲット イベントの場所からドキュメントのルート ノードまでトレースバックし、イベント オブジェクトを内側から外側にバブルします。

1. キャプチャフェーズ

上記の例のように、lv3 がクリックされると、js はドキュメントの最上位レイヤーから開始して、クリック イベントの発生元を検索します。外側を内側に、それがlv3です。すると、外側から内側への処理が lv1 --> lv2 --> lv3 となり、この処理に従って、これら 3 つの p のクリック イベントが順番にトリガーされます。
このトリガーの方向がキャプチャの方向です。

2. バブリングフェーズ

クリックされたlv3を見つけた後、イベントを上に渡し、lv3→lv2→lv1の処理を行います。このとき、lv3とlv2は、 、lv1 のクリック イベント、この裏返しのトリガー プロセスはバブリングと呼ばれます

最も一般的に使用されるイベント バインディング メソッドの形式を振り返ってみましょう:

element.addEventListener(event, function, useCapture)

ここでは、useCaptureイベントがバブリング フェーズでトリガーされるかキャプチャ フェーズでトリガーされるかを定義するために使用されるブール値です。デフォルト値は false で、バブリング フェーズでトリガーされることを意味します。

この時点で、上の例で定義されたクリック メソッドがキャプチャ フェーズで実行され、返される結果が

lv1
lv2
lv3

であることがわかります。上の例の場合、onload コンテンツは次のようになります。 this

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

つまり、

click イベントは バブリング ステージ でトリガーされ、返される結果は

lv3
lv2
lv1

## です。 #まとめ

バブリングとキャプチャーの関係は、包含構造と被包含構造にのみ現れ、兄弟関係には存在しません。

バブリングとキャプチャーは方向性が違うだけです。

以上がJavaScript のバブリングとキャプチャの概要 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。