Detailed explanation based on event bubbling, event capture and event delegation

Event bubbling, event capturing, and event delegation

In JavaScript, event delegation is a very important thing. Event delegation relies on the mechanism of event bubbling and capturing. Let me first explain event bubbling and event capturing:

Event bubbling will be passed up one level at a time from the currently triggered event target, triggering it in sequence until it reaches the document.
Event capture starts from the document and is passed down one level at a time until the actual event target is reached.

Is this a bit abstract? In fact, it is just like when I type on the keyboard, while I type on the keyboard, am I also typing on the computer? Let me give you an example so that you can understand:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #box1 { width: 300px; height: 300px; background: blueviolet; }
        #box2 { width: 200px; height: 200px; background: aquamarine; }
        #box3 { width: 100px; height: 100px; background: tomato; }
        div { overflow: hidden; margin: 50px auto; }
    </style>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>
        <script>
            function sayBox3() {
                console.log('You clicked the innermost box');
            }
            function sayBox2() {
                console.log('You clicked the middle box');
            }
            function sayBox1() {
                console.log('You clicked the outermost box');
            }
            // Event monitoring, the third parameter is a Boolean value, the default is false, false is event bubbling, true is event capture document.getElementById('box3').addEventListener('click', sayBox3, false);
            document.getElementById('box2').addEventListener('click', sayBox2, false);
            document.getElementById('box1').addEventListener('click', sayBox1, false);
        </script>
    </body>
</html>

We have drawn three boxes, which are parent-child boxes, and each box is bound to a print event. Now let's click the red box in the middle:

We found that we only clicked the red box, but the green and purple boxes also triggered the print event. The order of violation was red>green>purple. This phenomenon is event bubbling.

Let’s try event capture again. Change the third parameter of the event listener in the above code to true, and then click the red box:

We still only click on the red box in the middle. Just like last time, events are triggered in all three boxes, but the order is reversed: purple > green > red. This phenomenon is called event capture.

Through the above examples, it should be easy to understand event bubbling and event capturing. We usually use bubbling by default, and the bubbling continues to the root document.

Now let's talk about event delegation, which is also called event proxy. Let's explain it through a common example:

Three colleagues are expected to receive a courier on Monday. There are two ways to sign for the courier: 1. Three people wait for the courier at the company gate; 2. Entrust the front desk MM to sign for it on their behalf. In reality, most of us adopt the delegation solution (the company will not tolerate so many employees standing at the door just waiting for express delivery). After the front desk MM receives the express, she will determine who the recipient is, and then sign for it according to the recipient's requirements, and even pay on his or her behalf. This solution also has an advantage, that is, even if there are new employees in the company (no matter how many), the front desk MM will verify and sign for the express delivery sent to the new employee after receiving it (events can also be bound to nodes that do not exist temporarily).

Let's take another example:

Now there is a ul, and there are 100 li in ul. I want to bind a click event to these 100 li. We can usually bind it through a for loop, but what if there are 1000 li? In order to improve efficiency and speed, we can use event delegation at this time and only bind one event to ul. According to the event bubbling rule, as long as you click on each li in ul, the bound event of ul will be triggered. Through some judgments in the function of ul binding event, we can trigger click events for these 100li.

How to implement it specifically, see the code:

// We won't talk about IE here, we'll talk about it at the end function clickLi() {
    alert('You clicked on li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
    // Each function has an event object, which has a target attribute pointing to the event source var src = event.target;
    // We determine that if the target event source node name is li, then execute this function // There are many attributes in target, such as id name, class name, node name, etc. if (src.nodeName.toLowerCase() == 'li') {
       clickLi();
    }
});

In this way, by binding a click event to ul, all li will trigger the function.

What if you want to bind different functions to different li?

Suppose there are 3 li, we first write 3 different functions, and then set different id names for the 3 li, and then we can bind different functions to different li by judging whether the id name is correct:

<body>
    <ul id="isUl">
        <li id="li01">1</li>
        <li id="li02">2</li>
        <li id="li03">3</li>
    </ul>
    <script>
        function clickLi01() {
            alert('You clicked on the first li');
        }
        function clickLi02() {
            alert('You clicked on the second li');
        }
        function clickLi03() {
            alert('You clicked the third li');
        }
        document.getElementById('isUl').addEventListener('click', function(event) {
            var srcID = event.target.id;
            if(srcID == 'li01'){
                clickLi01();
            }else if(srcID == 'li02') {
                clickLi02();
            }else if(srcID == 'li03') {
                clickLi03();
            }
        });
    </script>
</body>

This is the so-called event delegation, which binds events to different child elements by listening to a parent element, reducing the number of listening times and thus improving speed.

So, is it possible to prevent the event bubbling of an element? The answer is yes.

In the example at the beginning, if we really only want to click the innermost red box and don’t want the events of the other two boxes to be triggered, we can write this in the function that binds the event to the red box:

function sayBox3(event) {
    // Stop bubbling event.stopPropagation();
    console.log('You clicked the innermost box');
}
document.getElementById('box3').addEventListener('click', sayBox3, false);

In this way, if we click on the red box again, it will only trigger its own event.

So is there any practical use for preventing bubbling? The answer is yes, let’s look at this example:

This is a modal box. The current requirement is that when we click the red button, we need to jump to the page, and then click the white dialog box without any response, and click anywhere else to close the modal box.

Here we need to use the method of preventing bubbling. The red button is a child element of the white dialog box, and the white dialog box is a child element of the entire modal box. We add a click event to close the modal box, and then add a click event jump to the red button. Then a problem arises. As long as the white dialog box is clicked, the modal box will also be closed due to the bubbling mechanism. In fact, we don’t want any reaction when clicking the white dialog box. At this time, we bind a click event to the white dialog box and write event.stopPropagation(); in the function, and that’s it.

About IE

Old versions of IE have compatibility issues and do not support addEventListener() and removeEventListener(). They have their own listening methods:

// Add an event, the event flow is fixed to bubbling attachEvent (event name, event processing function)
// Delete event detachEvent(event name, event processing function)

Also, the event object in IE is window.event, the event source is srcElement, and the way to prevent bubbling is also different:

function() {
    // Prevent bubbling in IE window.event.cancelBubble = true;
    // Get the event source id in IE
    var srcID = window.event.srcElement.id;
}
function(event) {
    // Prevent bubbling in non-IE event.stopPropagation();
    // Get the event source id in non-IE
    var srcID = event.target.id;
}

Replenish

Regarding the browser compatibility issue of js, it is generally solved by capability detection, if(){}else{}

We usually use jQuery in our daily work, and IE has already made compatibility for us in these special cases.

After jQuery version 1.7, the most popular event monitoring method is $(element).on(event name, execution function). It also has an event delegation method $(delegated to which element).on(event name, delegated element, execution function)

Finally, if the element is prevented from bubbling, never use event delegation to listen to events, because the principle of event delegation is to use event bubbling. When bubbling is prevented, you cannot listen to events.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

You may also be interested in:

A brief analysis of the event delegation mechanism and deep and shallow copying in JavaScript
JavaScript event delegation implementation principles and advantages
Detailed explanation of javascript event monitoring and event delegation examples
Introduction to event objects and event delegation in js
JavaScript adds event listeners to event delegation in batches. Detailed process

<<: Navicat imports csv data into mysql

>>: How to view the creation time of files in Linux