Execution order of event bubbling and event capturing

I have seen many articles before. They all uniformly say that event capture is executed first and bubbling is executed later. In fact, this is not rigorous. We just have time today to take a look at it and give an example.

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

First we wrote 4 divs, which are nested relationships. I set different sizes and background colors for them. The page display effect is as follows

Next, we need to bind bubbling and capturing to these four elements respectively. At this time, we need to use addEventListener(). This method needs to pass three parameters.

The first parameter: the name of the event to be executed. Note that it cannot contain on. For example, click should be written instead of onclick.

Second parameter: event handling function executed after triggering the event

The third parameter: perform capturing or bubbling. false means bubbling, which is also the default value, and true means capturing

 //冒泡
        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);

After we bind the parameters, we execute it. The execution results are as follows:

What I clicked is div4. You can see from the results below that for 1-3, the capture is executed first and then the bubbling is executed. But for our div4, it outputs bubbling first and then capture. So at this time, let’s modify it and only write the capture event of div4 before the bubbling event of div4

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

The execution results are as follows

So the demonstration is very clear here. For nested elements, capture is executed first, and then bubbling is executed.

But for the triggered element (here referring to div4), the execution order of capturing and bubbling depends on the order in which the code is written, who executes whom in front

This way everyone can know more clearly the execution order of capturing and bubbling ~ fighting