Differences between. BIND (),. Live () and. Delegate () of jquery

Abstract: jquery's. BIND (),. live () and. the difference between delegate () is not always so obvious. However, if we have a clear understanding of all the differences, this will help us to write more concise code and prevent errors in interactive applications.

Basic Elements

 

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. This event triggers the execution of any function on the click event that we have bound to this element.

$ ('A'). BIND ('click', function () {alert ("That tickles! ")});

Therefore, a click operation triggers the execution of the alert function.

The click event will then spread to the root direction of the tree, broadcast to the parent element, and then each ancestor element, as long as the click event on a child element of the tree is triggered, the event is passed to it.

In the context of Dom manipulation, document is the root node.

Now we can easily describe the differences between. BIND (),. Live (), and. Delegate.

. BIND ()

$ ('A'). BIND ('click', function () {alert ("That tickles! ")});

This is the simplest binding method. The jquery scan document finds all the $ ('A') elements and binds the alert function to the click event of each element.

. Live ()

$ ('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 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 all are used, the function is executed.

The live method can also be bound to a specific element (or context) rather than a document, like this:

$ ('A', $ ('# iner') [0]). Live (...);

. Delegate ()

$ ('# Iner'). Delegate ('A', 'click', function () {alert ("That tickles! ")});

Jquery scans the document for $ ('# iner') and binds the alert function to $ ('# iner') using the Click Event and the 'A' CSS selector as parameters. Whenever an event bubbles to $ ('# iner'), it checks whether the event is a click event and whether the target element of the event matches the CCS selector. If 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 a document. The Savvy JavaScript 'er may come to the conclusion that $ ('A '). live () ==$ (document ). delegate ('A'), is that true? Well, no, not exactly.

Why. Delegate () is better than. Live ()

For several reasons, people prefer to use jquery's delegate method instead of the live method. Consider the following example:

$ ('A'). Live ('click', function () {blah ()});
// Or
$ (Document). Delegate ('A', 'click', function () {blah ()});

Speed

The latter is actually faster than the former, because the former first needs to scan the entire document to find all the $ ('A') elements and save them as jquery objects. Although the live function only needs to pass 'A' as a string parameter for subsequent judgment, the $ () function does not know that the method to be linked will be. Live ().

On the other hand, the delegate method only needs to find and store the $ (document) element.

One way to avoid this problem is to call live bound outside of $ (document). Ready () so that it will be executed immediately. In this way, it runs before the DOM obtains the padding, so it does not search for elements or create jquery objects.

Flexibility and chain capabilities

The live function is also confusing. Think about it, It is chained to the $ ('A') object set, but it actually works on the $ (document) object. For this reason, it can try to chain methods to itself in a way that is frightening. In fact, what I want to say is: $. Live ('A ',...) As a global jquery method, the live method is more meaningful.

Only the CSS selector is supported.

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

For more information about the shortcomings of the CSS selector, refer to the article listing ing jquery. Live () and. Die.

Update: Thanks to pedalpete on Hacker News and ellsass in the comments below for reminding me to join the next section.

Why choose. Live () or. Delegate () instead of. BIND ()

After all, the BIND seems more explicit and straightforward, isn't it? Well, there are two reasons why we prefer to choose delegate or live instead of BIND:

To attach a handler to a DOM element that may not exist in the Dom. Because bind directly binds the handler to each element, it cannot bind the handler to an element that does not exist on the page.

If you run $ ('A'). BIND (...), After the new link is added to the page via Ajax, your bind handler is invalid for these newly added links. On the other hand, live and delegate are bound to another ancestor node. Therefore, live and delegate are valid for any element that exists within the ancestor element currently or in the future.

Or, to attach the handler to a single element or a group of elements, listen to the events on the child element instead of looping and attach the same function to the 100 elements in the DOM one by one. Attaching a handler to one (or a group) ancestor element rather than directly attaching the handler to all elements on the page brings performance benefits.

Stop Propagation

The last reminder I want to make is related to event propagation. In general, we can terminate the execution of the processing function by using such an event method:

$ ('A'). BIND ('click', function (e ){
E. preventdefault ();
// Or
E. stoppropagation ();
});

However, when we use the live or delegate method, the processing function is not actually running. The function will run only when the event bubbles to the elements actually bound to the processing program. So far, our other processing functions from. BIND () have been running.