How does the Javascript/jquery event delegate be implemented?

A: What is an event delegate?

Event delegation is the use of event bubbling to specify only one event handler to manage all events of a certain type.

Event Delegation is implemented using event bubbling principle! Event Bubbling: The event starts at the deepest node and then propagates the event up and down;Example: There is a node tree on the page, div > ul > li > AFor example, to add a click event to the innermost A, then the event will be executed one layer at a time, execution order a > li > Ul > div, there is such a mechanism, when we give the outermost Div added click event, then inside of the UL, Li, a Do Click on the event, will bubble to the outermost div, so will trigger, this is the event delegate, delegate their parent set on behalf of the execution of events; What is event bubbling? JS so-called event bubbling is a child element of an event is triggered, its ancestor element of the event is also recursive execution, jquery event delegate is used to bubble.

Two: Why use events to delegate?

1. The number of event handlers added to the page in JavaScript is directly related to the overall performance of the page. Why is it? Because each event handler is an object, the object consumes memory, and the more objects in memory, the worse the performance. In addition, the number of DOM accesses that must be specified in advance for all event handlers will delay the interaction readiness time of the entire page.

2. It's a nightmare to add a single event to a table with a lot of data and a long list. So event delegation can greatly improve the performance of the page and reduce the workload of developers.

Three: examples in JavaScript

For example, we use the following HTML code as an event delegate to implement the LI element's background to red when the mouse clicks on an LI element.

<ul id = "lists" > <li> list 1</li> <li> list 2</li>
<li> list 3</li>
<li> list 4</li>
</ul>

1 var lists = document.getElementById ("lists"); 2 3 Lists.addeventlistener ("click", Function (event) { 4 5 var target = Event.target; 6//Prevent parent element UL also triggering event 7 if (target.nodename = = "LI") {8 Target.style.backgroundC Olor = "Red"; 9}10})

The event delegation method in jquery is rich in the same example:
1. Using the On method

$ ("#lists").  on ("Click", "Li", Function (event) {3                 var target = $ (event.target); 4                 target.css ("Background-color", "Red"); 5             })

2. Using the delegate () method

$ ("#lists"). Delegate ("Li", "click", Function (event) {3                 var target = $ (event.target); 4                 target.css ("Background-color", "Red"); 5             })

3. Use the Bind () method

$ ("#lists"). Bind ("Click", "Li", Function (event) {3                 var target = $ (event.target); 4                 if (Target.prop ("nodeName") = = "Li") {5                 Target.css ("Background-color", "Red");} 6             })

Live and bind differences:
The Bind method can only bind events to the currently existing elements, and the newly generated elements, such as JS, are not valid, while the live method compensates for this flaw of the bind method, which can also bind the corresponding event to the generated elements.

How does the Javascript/jquery event delegate be implemented?