Analysis of the differences between .bind(), .live() and .delegate() in jQuery_jquery

DOM tree

First, it is helpful to visualize the DOM tree of an HMTL document. A simple HTML page looks like this:

Event bubbling (also known as event propagation)

When we click a link, it triggers the click event of the link element, which triggers the execution of any function we have bound to the click event of that element.

Copy code The code is as follows:

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

So a click operation will trigger the execution of the alert function.

The click event will then propagate towards the root of the tree, broadcasting to the parent element, and then to each ancestor element. As long as the click event on one of its descendant elements is triggered, the event will be passed to it.

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

Now we can more easily explain the differences between .bind(), .live() and .delegate().
.bind()

Copy code The code is as follows:

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

This is the simplest binding method. JQuery scans the document to find all $('a') elements and binds the alert function to the click event of each element.
.live()

Copy code The code is as follows:

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

JQuery binds the alert function to the $(document) element and uses 'click' and 'a' as parameters . Whenever an event bubbles up to the document node, it checks whether the event is a click event and whether the target element of the event matches the 'a' CSS selector. If so, it executes the function.
The live method can also be bound to a specific element (or "context") instead of the document, like this:

Copy code The code is as follows:

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

.delegate()

Copy code The code is as follows:

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

JQuery scans the document to find $('#container'), and Bind the alert function to $('#container') using the click event and the 'a' CSS selector as parameters. Any time an event bubbles up to $('#container'), it checks to see if the event is a click event and if the target element of the event matches the CSS selector. If the results of both checks are true, it executes the function.
It can be noted that this process is similar to .live(), but it binds the handler to a specific element rather than the document. Savvy JS'ers might conclude that $('a').live() == $(document).delegate('a') , right? Well, no, not quite .
Why .delegate() is better than .live()
For several reasons, people usually prefer to use jQuery’s delegate method instead of the live method. Consider the following example:

Copy code The code is as follows:

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

or
$(document).delegate('a', 'click', function() { blah() });
The latter is actually faster than the former, because the former has to scan the entire The document finds all $('a') elements and saves them as jQuery objects. Although the live function only needs to pass 'a' as a string parameter for later judgment, the $() function does not "know" that the linked method will be .live().

On the other hand, the delegate method only needs to find and store the $(document) element.
One way to seek to get around this problem is to call the live bound outside $(document).ready() so that it executes immediately. In this way, it runs before the DOM is populated, so no elements are found or jQuery objects are created.

Flexibility and chain capabilities

The live function is also quite confusing. Think about it, it's linked to the set of $('a') objects, but it actually works on the $(document) object. For this reason, it can try to chain methods onto itself in a scary way. In fact, what I'm saying is that the live method makes more sense as a global jQuery method in the form of $.live('a',...).

Only supports CSS selectors

Finally, the live method has a very big disadvantage, that is, it can only operate on direct CSS selectors, which makes it very inflexible.

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

Update: Thanks to pedalpete on Hacker News and Ellsass in the comments below for reminding me to include this next section.

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

After all, bind seems to be more clear and direct, doesn’t it? Well, there are two reasons why we prefer to choose delegate or live instead of bind:

1. To attach handlers to DOM elements that may not yet exist in the DOM. Because bind directly binds handlers to individual elements, it cannot bind handlers to elements that do not yet exist on the page.

2. If you run $('a').bind(…) and then new links are added to the page via AJAX, your bind handler will be invalid for these newly added links. Live and delegate, on the other hand, are bound to another ancestor node, so they are valid for any element that currently or will exist within that ancestor element.

3. Or to attach a handler to a single element or a small group of elements, listen to events on descendant elements instead of looping through and attaching the same function to 100 elements in the DOM one by one. There are performance benefits to attaching handlers to one (or a small set of) ancestor elements rather than directly attaching handlers to all elements in the page.

Stop spreading

The last reminder I want to make has to do with event propagation. Normally, we can terminate the execution of the handler function by using an event method like this:

Copy code The code is as follows:

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

However, when we use the live or delegate method, the handler function is not actually running. The function needs to wait until the event bubbles to the element that the handler is actually bound to. By this point, our other handler functions from .bind() have already run.