When we click on a link, it triggers a click event for the link element that raises any execution of the function on the click event that we have bound to the element.
Now it is easier to explain the difference between. bind (),. Live () and. Delegate ().
. Bind ()
Copy Code code as follows:
$ (' a '). bind (' click ', function () {alert (' that tickles! ');})
This is the simplest way to bind. The jquery scan document finds all the $ (' a ') elements and binds the alert function to the click event of each element.
. Live ()
Copy Code code as follows:
$ (' a '). Live (' click ', function () {alert (' That tickles! ')})
jquery binds the alert function to the $ (document) element and uses ' click ' and ' a ' as an argument. Whenever an event bubbles to the document node, it looks at whether the event is a click event and whether the target element of the event matches the CSS selector of ' a ' and, if so, the function.
The live method can also be bound to a specific element (or "context") instead of a document, like this:
Copy Code code as follows:
$ (' A ', $ (' #container ') [0]). Live (' click ', function () {alert (' That tickles! ')})
. Delegate ()
Copy Code code as follows:
$ (' #container '). Delegate (' A ', ' click ', function () {alert (' That tickles! ')})
The jquery scan document looks up $ (' #container ') and binds the alert function to $ (' #container ') using the Click event and a CSS selector of ' a ' as a parameter. Whenever an event bubbles to $ (' #container '), it looks at whether the event is a click event and whether the target element of the event matches the CSS selector. If the results of both tests 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 ' Er may conclude that $ (' a '). Live () = = $ (document). Delegate (' A '), is that so? Well, no, not exactly.
Why. Delegate () is more useful than. Live ()
For several reasons, people are often more willing to use the delegate method of jquery than the live method. Consider the following example:
Copy Code code as follows:
$ (' a '). Live (' click ', function () {blah ()});
Or
$ (document). Delegate (' A ', ' click '), function () {blah ()});
The latter is actually faster than the former because the first scan of the entire document looks for all the $ (' a ') elements and saves 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 linked method 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 invoke live that is bound outside of $ (document). Ready () so that it executes immediately. In this way, it runs before the DOM gets a fill, so it doesn't look for elements or create jquery objects.
Flexibility and chain capability
The live function is also very puzzling. Think of it as being linked to the $ (' a ') object set, but it actually acts on the $ (document) object. For this reason, it can try to link the method to itself in a way that frightens the dead. In fact, what I want to say is that with $.live (' a ',...) This form is a global jquery method, and the live method is more meaningful.
Only CSS selectors are supported
Finally, one of the big drawbacks of the live approach is that it only operates on the direct CSS selector, which makes it very inflexible.
To learn more about the drawbacks of CSS selectors, see the article Exploring JQuery. Live () and. Die ().
UPDATE: Thank Hacker News Pedalpete and Ellsass in later comments for reminding me to join the following section.
Why Choose. Live () or. Delegate () instead of. Bind ()
After all, bind seems more explicit and straightforward, doesn't it? Well, there are two reasons why we prefer to choose delegate or live instead of bind:
1. To attach the handler to a DOM element that may not yet exist in the DOM. Because bind binds a handler directly to each element, it cannot bind a handler to an element that is not yet present in the page.
2. If you run the $ (' a '). Bind (...), and then the new link is added via AJAX to the page, your bind handler is not valid 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 is present or in the future within that ancestor element.
3. Or to attach a handler to a single element or a small group of elements, listen for events on descendant elements instead of looping through and attaching the same function to 100 elements in the DOM. Attaching a handler to a (or a group of) ancestor element rather than attaching the handler directly to all the elements in the page provides a performance benefit.
The last reminder I want to make is related to the spread of events. Typically, we can terminate the execution of a handler by using such an event method:
Copy Code code as follows:
$ (' a '). bind (' click ', Function (e) {
E.preventdefault ()
E.stoppropagation ()}
)
However, when we use live or delegate methods, the handler function is not actually running, and the function will not run until the event bubbles to the element that the handler actually binds. And by this time, our other handlers from. Bind () have already run.
