The difference between () in the jQuery .bind () ,. live () and .delegate Analysis

Original link: https://www.mk2048.com/blog/blog.php?id=h002bj2ik2kj&title=jQuery%E4%B8%AD%E7%9A%84.bind%28%29%E3%80%81.live % 28% 29% E5% 92 % 8C.delegate% 28% 29% E4% B9% 8B% E9% 97% B4% E5% 8C% BA% E5% 88% AB% E5% 88% 86% E6% 9E 90%

DOM tree 

First, a visual HMTL document DOM tree is helpful. A simple HTML page looks like this:

 

Event bubbling (also known as event propagation)

 

When we click on a link, the link elements that triggered the click event, which is triggered to perform functions on any of our already bound to the element click event.

Copy the code code is as follows:

$('a').bind('click',function(){alert('that tickles!')}) 

Therefore, a click operation will trigger the execution of alert function.

 

 

click events will then spread to the root of the tree direction, broadcast to the parent element, then followed by each ancestor element, as long as the click event on one of its descendant elements is triggered, the event is passed to it.

 

 

In the context of manipulating the DOM, document root node.

 

Now we can more easily explain .bind () ,. live () and .delegate () is different from the.
.bind () 

Copy the code code is as follows:

$('a').bind('click',function(){alert('That tickles!');})

This is the simplest method of binding. JQuery scanned documents to find all of the $ ( 'a') elements, and the alert function bound to the click event of each element. 
.live () 

Copy the code code is as follows:

$('a').live('click',function(){alert('That tickles!')})

The alert function JQuery bound to $ (document) elements, and the use of 'click' and 'a' as a parameter. Whenever there is an event bubbling to the document node, it is to see whether the event is a click event, and the target element of the event with the 'a' of the CSS selector matches if we are all, then execute the function. 
live method may also be bound to a specific element (or "context") instead of the document, such as: 

Copy the code code is as follows:

$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

.delegate() 

Copy the code code is as follows:

$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery scanned documents to find $ ( '# container'), and use the click event and the 'a' of the CSS selector as an argument to alert function bound to $ ( '# container'). Whenever there is an event bubbling to $ ( '# container') on it to see whether the event is a click event, and whether the target element of the event match the CSS selector. If the results of the two checks are true, it performs a function. 
It may be noted that this process is .live () is similar, but the handler is bound to a specific document elements, rather than on this one. Savvy JS'er they might reach the conclusion that $ ( 'a'). Live () == $ (document) .delegate ( 'a'), is that right? Ah, no, not exactly . 
Why .delegate () than .live () useful 
for several reasons, people usually prefer to delegate the choice of method rather than live jQuery method. Consider the following example: 

Copy the code code is as follows:

$('a').live('click', function() { blah() });

Or 
$ (document) .delegate ( 'a  ', 'click', function () {blah ()});
the latter actually be faster than the former, because the former must first scan the entire document to find all $ ( 'a ') elements, storing them into jQuery object. Although only function should live 'a' is determined as a string parameter passed to subsequent used, but $ () function does not "know" the method would be linked .live (). 

On the other hand, delegate method only need to find and store $ (document) elements. 
A method seeks to avoid this problem is to call in live $ (document) .ready () outside the binding so that it will be executed immediately. In this way, it will be run before the DOM to get filled, so it will not find elements or create a jQuery object. 

Flexibility and the ability to chain

 

live function is also quite puzzling. Think, which are linked to the $ ( 'a') the set of objects, but actually takes place on the $ (document) object. For this reason, it can be trying in a scary way to the chain method on itself. In fact, I would say, to $ .live ( 'a', ...) of this form as a method of jQuery global in nature, live some of the methods will be more meaningful.

 

Only supports CSS selectors

 

Finally, live method has a very big disadvantage is that it can only do direct operations for CSS selector, which makes it very inflexible.

 

To learn more about the shortcomings of CSS selectors, see Exploring jQuery .live () and .die () article.

 

Update: Thanks pedalpete back and comment on Hacker News in Ellsass remind me to join this next section.

 

Why .live () or .delegate () instead .bind ()

 

? After all, bind seems more clear and direct, is not it ah, there are two reasons to prefer delegate or live rather than bind:

 

1. For the handler to the DOM may not have been present in the DOM elements above. Because bind directly to the handler is bound to the individual elements, it can not bind to the top of the handle element has not been present in the page.

 

2. If you are running $ ( 'a'). Bind (...), then the new link is added to the page via AJAX, then you bind handler for these newly added link is invalid. Live and on the other hand are bound delegate to another ancestor node, so that, for any current or future is present in the element's ancestor elements are valid.

 

3 or to the handler to a single element or group of elements above, the descendant elements listen for events not loop through the same function and individually attached to the DOM 100 elements. The handlers attached to one (or a group) ancestor element rather than directly to the handler to all elements on the page, this approach brings performance benefits.

 

Stop the spread

 

The last event I want to remind the dissemination of information. Under normal circumstances, we may terminate perform processing functions by using methods such events:

Copy the code code is as follows:

$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
) 

However, when we use live or delegate method handler is not actually running, you will need to wait until run-time function element on event bubbling to the handler actual binding. And up to this point, our other handler from .bind () is already running.

(From: http: //www.jb51.net/article/27309.htm)

More professional front-end knowledge, make the [2048] ape www.mk2048.com