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

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

jQuery, friends who are learning jquery can refer to it.

DOM tree

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

EventBubbling (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 the element.

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, broadcast to the parent element, and then to each ancestor element, as long as it is a single click on one of its descendant elements. When the click event 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()

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()

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 CSS selector of 'a'. If both If so, execute the function.
The live method can also be bound to a specific element (or "context") instead of the document, like this:

The code is as follows:

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

.delegate()

The code is as follows:

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

JQuery scans the document to find $('#container'), and uses the click event and the 'a' CSS selector as parameters to bind the alert function to $('#container'). 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 root. Savvy JS'ers might conclude that $('a').live() == $(document).delegate('a') , right? Well, no, not quite .
Why .delegate() is easier to use than .live()
For several reasons, people usually prefer to use jQuery's delegate method instead of the live method. Consider the following example:

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 jQueryobjects. 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 avoid this problem is to call the live bound outside $(document).ready(), so that it will execute 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 puzzling. 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

Last point, the live method has a very big disadvantage, that is, it can only operate on direct CSS selectors. This Making it very inflexible.

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

Update: Thanks to pedalpete on Hacker News and Ellsass in the comments below for reminding me to add 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 delegate or live over 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 for these newly added links is Invalid. 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 superior. 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 spreading. Normally, we can terminate the execution of the handler function by using such an event method:

The code is as follows:

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

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

The above is the detailed content of Analysis of the differences between .bind(), .live() and .delegate() in jQuery. For more information, please follow other related articles on the PHP Chinese website!