The event delegation mechanism of JS and jquery

Transfer: http://www.ituring.com.cn/article/467

Concept:

What is an event delegate: Popular, the event is onclick,onmouseover,onmouseout, and so is the event, entrusted, is to let others do, this event is added to some elements, but you add to others to do, complete this event.
For example: Three colleagues are expected to receive a courier in Monday. For the Signature Express, there are two ways: one is three people at the door of the company and other courier, the second is entrusted to the front desk mm for sign. In reality, most of US use commissioned programs (the company will not tolerate so many employees standing at the door to wait for courier). The front desk mm received the courier, she will determine who the recipient, and then according to the recipient's request for sign, or even on behalf of payment. This solution also has an advantage, that is, even if the company's new employees (regardless of how much), the front desk mm will be sent to the new staff after The courier to verify and sign on behalf of.

Principle:

Using the bubbling principle, the event is added to the parent, triggering the execution effect.

Role:

1. Better performance
2. For newly created elements, you can have an event directly

Event Source:

Same as this (he does not have to look at the problem, who is the person who operates), the event object under the

Usage scenarios:

? Bind the same event for many elements in the DOM;
? Bind an event to an element that does not already exist in the DOM;

JS's event delegate

Event Delegation for jquery

$ (function () {     $ (' #ul1, #ul2 '). Delegate (' Li ', ' click ', Function () {         if (!$ (this). attr (' s ')} {         $ (this). css (' Background ', ' red ');         $ (this). attr (' s ', true);         } else {             $ (this). CSS (' background ', ' #fff ');             $ (this). Removeattr (' s ');         }     }) });

The newest on () method takes the delegate () method

$ (function () {         $ (' #ul1, #ul2 '). On (' Click ', ' Li ', function () {                 if (!$ ()} attr (' s ')) {                 $ (this). CSS (' Background ', ' red ');                 $ (this). attr (' s ', true);                 } else {                         $ (this). CSS (' background ', ' #fff ');                         $ (this). Removeattr (' s ');                 }         }) });

The event delegation mechanism of JS and jquery