イベントバブリングとイベントキャプチャの実行順序

以前に多くの記事を見てきましたが、どの記事も一律に、イベントキャプチャが最初に実行され、バブリングが後で実行されると述べています。実際、これは厳密ではありません。今日は時間があるので、それを見て例を示します。

  <div id="div1">
        我是div1
        <div id="div2">我是div2
            <div id="div3">
                我是div3
                <div id="div4">我是div4</div>
            </div>
        </div>
    </div>

まず、ネストされた関係である 4 つの div を作成し、それぞれに異なるサイズと背景色を設定しました。ページの表示効果は次のとおりです。

次に、バブリングとキャプチャをこれら 4 つの要素にそれぞれバインドする必要がありますが、このとき addEventListener() を使用する必要があります。このメソッドには 3 つのパラメータを渡す必要があります。

最初のパラメータ: 実行するイベントの名前。on を含めることはできないことに注意してください。たとえば、onclick の代わりに click と記述する必要があります。

2 番目のパラメータ: イベントのトリガー後に実行されるイベント処理関数

3 番目のパラメータ: キャプチャまたはバブリングを実行します。false はバブリングを意味し、これはデフォルト値でもあり、true はキャプチャを意味します。

 //冒泡
        oDiv1.addEventListener('click', function () {
            console.log("我是div1");
        });
        oDiv2.addEventListener('click', function () {
            console.log("我是div2");
        });
        oDiv3.addEventListener('click', function () {
            console.log("我是div3");
        });
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });
        //捕获
        oDiv1.addEventListener('click', function () {
            console.log("我是div1-1");
        }, true);
        oDiv2.addEventListener('click', function () {
            console.log("我是div2-2");
        }, true);
        oDiv3.addEventListener('click', function () {
            console.log("我是div3-3");
        }, true);
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);

パラメータをバインドした後、実行すると、実行結果は次のようになります。

クリックしたのは div4 です。以下の結果を見ると、1 ～ 3 では最初にキャプチャが実行され、次にバブリングが実行されることがわかります。しかし、今回の div4 では、最初にバブリングが出力され、次にキャプチャが実行されます。それを変更し、div4 のバブリングイベントの前に div4 のキャプチャイベントのみを書き込みます。

//就是把div4的捕获写在前面
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });

実行結果は以下の通り

ネストされた要素の場合、最初にキャプチャが実行され、次にバブリングが実行されます。

ただし、トリガーされた要素 (ここでは div4 を指します) の場合、キャプチャとバブリングの実行順序は、コードが書かれた順序、誰が誰を最初に実行するかによって決まります。

これにより、捕獲とバブリング～戦闘の実行順序を誰でもより明確に知ることができます

イベントバブリングとイベントキャプチャの実行順序

おすすめ