Shulou(Shulou.com)06/02 Report--

What is the principle of JavaScript event delegation? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

I. what is event delegation

Event delegates are also known as event proxies. Is to use event bubbling to bind the events of child elements to the parent element. If the child element prevents the event from bubbling, the delegate cannot be implemented.

Take a simple example:

For example, couriers have 100 couriers to send to 100 students, if one by one takes a long time. At the same time, each student also needs to wait in line to get it, and it also takes a long time. How should it be done? At this time, the courier can entrust 100 couriers to the head teacher, who will put them in the office and the students can pick them up after class. In this way, it is easier for couriers and it is more convenient for students to get it. This process is a delegated event.

Second, the principle of event delegation

Instead of setting event listeners separately for each child node, event listeners are set on its parent node, and then use the bubbling principle to influence the setting of each child node.

Let's take a look at how it is implemented in a specific program.

For example, we now have an unordered list with five li in the unordered list, and we want to add a click event to each li. At this time, our routine is to add a click event to each li through a loop.

The code is as follows:

111111 222222 333333 444444 555555 var li = document.querySelectorAll ('li'); for (var item0

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.