Home > Developer > Web Develop
Event delegate
Statement: This article only describes the principle of the Commission of events and the advantages of using the delegate and when to entrust the appropriate. Here is the use of On () and off () and the other methods of the delegate (delegate (), Live (), etc.) and the comparison of the various methods are not elaborated here, If you have a chance to send a post
1. What is a delegate?
A) Definition: Handing over one thing to another is called a delegate.
b) Question: Why do you have to give it to someone else to do it?
The reason is very simple: first, I do not want to do, so give others second, they will not do, so give someone else to do the third, let others do this thing more advantages and so on (this is why to use the reason of the delegation)
c) For ease of understanding, take a simple example (reproduced: http://www.cnblogs.com/secying/archive/2012/03/22/2411780.html): Three colleagues are expected to receive the 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). After receiving the courier, she will determine who the recipient is, and then follow the recipient's request for sign, or even on behalf of the payment. One advantage of this approach is that even if the company comes with new employees (regardless of how many), the front desk will be sent to the new staff after The courier to verify and sign on behalf of (that is, let the front desk to do this thing more advantageous). It's easier to understand this way.
2. What about the event entrusted to you (as for what is the event is no longer elaborated here, do not understand the friend please yourself Google)? If an event is likened to something that is to be done, then the event is entrusted to the individual to do the event, and in JS it is to give an event to other elements.
3.Jquery is how to implement the event delegate specifically?
A) example of an event delegate, see the following code:
<script type= "Text/javascript" src= "Js/jquery-1.9.1.min.js" ></script>
<scrpty type= "Text/javascript" >
$ (function () {
Delegate a span's click event to a DIV
$ (' div '). On (' click ', ' span ', function (e) {alert ("The Is span label");});
Click the Span tab-execution results pop-up this is span label
});
</scrpty>
<body>
<div>
<span id= "Span" >hello</span>
<input type= "text" >
</div>
</body>
Analyze the above code in fact the click event is bound to the DIV element, so the reason to click the div this event is triggered, but the fact is not. Let's analyze the reason (the principle of the implementation of the delegate):
First, the event of a delegate is propagated outward in the form of bubbling, so the delegate event is triggered whenever a child of a div is clicked
Second, when the event propagates to the delegated element (this is the DIV), the two properties of E.type and E.target are judged first.
Combined with the above two points only click on the element of the delegate event (in this case, span) to trigger the clicked event bound on the DIV element
b) Analyze the following situation and change the above JS code to:
<scrpty type= "Text/javascript" >
Just binding an order to a span tag
$ (' span '). On (' click ', Function (e) {alert ("The Is span label");});
Dynamically add 10 span tags
for (Var i=0;i<10;i++) {
$ ('. Div '). Append ($ (' <span>span1</span><br/> '));
}
</scrpty>
In this case, only the label with the ID span is bound to the Click event, and the later dynamically added span tag does not,
How do I add an event to a subsequent span tag in this case? Add $ (' span ') after adding the span tag code. ON (' click ', Function (e) {}); Is it simple? Since it can be written like this, the delegate exists.
Is it necessary?
According to the 1th above, the event of a delegate is bound to an element that exists, so he binds only once, and $ (' span '). On (' click ', Function (e) {}); This code is bound once for each span element,
This means that if there are 200 span elements bound 200 times, increased code redundancy and reduced performance, so delegates not only enhance performance and increase the readability of the code.
Summary: First, in order to add events to dynamically generated elements with the delegate two, if it is a one-time to give many of the same elements to bind events with the delegate benefits: Enhanced performance and Code readability
This article comes from the "sticking to the principle to change" blog, so be sure to keep this source http://iteaing.blog.51cto.com/8800269/1565672
The principle and purpose of jquery event delegation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
