Introduction to JavaScript bubbling and capturing (with code)

The content of this article is an introduction to the knowledge of JavaScript bubbling and capturing (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is JS bubbling and capturing?

Bubbing and capturing refer to the two directions, or processes, in which js delivers events when an event on an element is triggered.

Foreword:

For example, there is such a page and js method

Less: I use less to write Yes, if there is no less environment, you can ignore this paragraph.

.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')
}

What the above js does:
When the page is loading, add click monitoring methods to the three divs, yourself When clicked, its own id value will be output in the console.

The structure of the page is like this: lv1 contains lv2, and lv2 contains lv3. When you click on lv3, you actually click on lv2 and lv1, because lv3 is inside lv2. When you click on lv3, you will naturally click on it. lv2 and lv1, that is to say, when lv3 is clicked, three click events will be triggered.
As for the order in which these three events are triggered, it is the so-called bubbling and capturing.

Three stages of event triggering:

1. Capture stage: First go from the root node of the document document to the event triggering object, Capture the event object from the outside in;
2. Locate the target: Find the target event location (where the incident occurred) and trigger the event;
3. Bubble stage: Then trace back from the target event location to the root node of the document, and bubble the event object from the inside out.

1. Capture phase

As in the above example, when lv3 is clicked, js will start from the top layer of the document and search for the origin of the click event from the outside inward. That’s lv3. Then this process from the outside to the inside is lv1 --> lv2 --> lv3. The click events of these three p's are triggered in sequence according to this process.
The direction of this trigger is the direction of capture.

2. Bubbling phase

After finding the clicked lv3, the event is passed upward. The process is lv3 --> lv2 --> lv1. At this time, lv3 and lv2 are triggered in sequence. , lv1's click event, this inside-out triggering process is called bubbling

Let's look back at the format of the most commonly used event binding methods:

element.addEventListener(event, function, useCapture)

Here, useCapture is Boolean value used to define whether the event is triggered in the bubbling phase or in the capturing phase. The default value is false, which means it is triggered in the bubbling phase.

At this point you will know that the click method defined in the above example is executed in the capture phase, then the returned result is

lv1
lv2
lv3

If the top example, the onload content is like this

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

So that is to say, the click event is triggered in the bubbling stage, and the returned result is

lv3
lv2
lv1

Summary

The relationship between bubbling and capturing will only appear in the containing and contained structures. This relationship will not exist in brother relationships.
Bubbling and capturing are just different in direction.

The above is the detailed content of Introduction to JavaScript bubbling and capturing (with code). For more information, please follow other related articles on the PHP Chinese website!