Detailed introduction to JavaScript event delegation (with code)

You can see that in this way, not only the amount of code is reduced, but the number of interactions with DOM nodes is also reduced.

Another advantage: when adding a new DOM node, the event effect of the parent element is automatically carried. In other words, when a new employee Ding comes to the company, the front desk staff will directly help him collect the express delivery without setting up an event specifically for him.

For example, when a new employee Ding comes to the company:

...

...

...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

In a program that does not use event delegation, there is no event for the newly added employee Ding. We need to use a function to contain it. Program 1:

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

Then execute this function at the end of the program that adds new employee D:

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

The disadvantage of this is obvious: the number of DOM node interactions increases exponentially.
If we use the event delegation mechanism to implement this, this problem will not exist. The onclick event of the child element node will be executed directly on the parent element node.

At this point, we will think: for the same kind of event, it is very convenient to use event delegation to place it on the parent element node. But if you want to execute different events for different child element nodes, can you still use event delegation?

The answer is yes.

For example, the above three company employees always use fixed brands of express delivery:

• Employee A likes to use STO Express because it is cheap, and STO only delivers to the park gate;
• Employee B is a JD.com member and always buys JD.com’s self-operated products, and JD.com delivers them downstairs by express delivery;
• Employee C is an SF Express VIP, and SF Express delivers them to the lobby of the floor where he is located.

After the three of them received the call, the front desk staff needed to go to different places to pick up the items. For programs that do not use event delegation, unique processing events need to be set for each person:

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

requires at least three DOM operations, and event functions are set for each corresponding node.

If event delegation is used:

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}

In this way, there is only one DOM operation, and other operations are performed in JS, which can effectively improve web page performance.

The above is the basic idea of ​​JS event delegation. In short, the feature of event bubbling is used to manage events, reduce redundant code, reduce unnecessary creation, and reduce interactive operations to save memory and improve performance.

Event bubbling

Event bubbling is when a DOM element node is triggered. If the node does not have a corresponding event, check whether its parent element has a corresponding event. If so, execute , if not, continue to check upward. Corresponding to it is event capture

The above is the detailed content of Detailed introduction to JavaScript event delegation (with code). For more information, please follow other related articles on the PHP Chinese website!