Detailed introduction to JavaScript event delegation (with code)

This article brings you a detailed introduction to JavaScript event delegation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Event delegation (also known as event proxy) uses event bubbling to manage all events of a certain type by specifying only one event handler.

There is a very vivid example of "getting express delivery" about event delegation on the Internet. Here I will make some modifications and expansions to it, and then use the program to illustrate the mechanism of event delegation.

There are three employees in a company, and their express delivery address is the company. Whenever an express delivery is delivered, the courier calls their phone number to notify them, and they go to pick up the parcel after receiving the call.

Employee ID	Employee Name	Contact Information
A	A	111111
B	B	222222
C	三	333333

corresponds to the page, that is, each employee is a tag:

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

Each employee answers the phone The act of picking up express delivery is an event. Here we assume that the act of picking up express delivery corresponds to the onclick event:

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

The implementation of the above usually involves looping through each employee and adding events to it:

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

It can be seen that setting an event for each employee will generate redundant code, occupy memory, and perform multiple DOM operations (interacting with DOM nodes), which will affect the page running performance.

“Reducing DOM operations is one of the main ideas of performance optimization”

So, we naturally thought: Why can’t we let the front desk staff sign for the express delivery for us?

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}

Assume that the courier calls employee A to pick up the package (onclick), but employee A’s DOM node

has no corresponding event (onclick), so this event will "bubble" to

's parent element

, and it is found that there is a onclick processing event on
, so the event is triggered, and the front desk staff Receive express delivery.

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:

...
<input type="button" id="btn" value="添加新员工">
...

...
/*程序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!