jquery Event binding method. Introduction to the use of bind (). Live (). Delegate ()

Basis

First, a graphical HTML document can help us understand better. A simple HTML page should look like this

Event bubbling (also known as event delivery) (Event bubbling aka event propagation)
Click on a link to trigger the Click event bound on the link element to trigger the function that binds to the click event of the element.

The code is as follows	Copy Code
$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

So one click will trigger an alert.

The Click event is then passed up from the DOM tree, propagated to the parent element, and then passed to each ancestor element.

In the DOM tree, document is the root node.
Now we can easily explain the difference between bind (),. Live (), and. Delegate ().

. Bind ()

The code is as follows	Copy Code
$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

　　
This is the most direct method of binding. The JQuery scan document finds all the $ (' a ') elements, and then gives the Click event Binding handler function for each element found.

. Live ()

The code is as follows	Copy Code
$ (' a '). Live (' click ', function () {alert ("that Tickles!")});

　　
jquery binds the processing function to the $ (document) element and takes ' click ' and ' a ' as the parameter of the function. When an event bubbles to the document node, check that the event is not a click event, target element can match the ' a ' CSS selector, if two conditions are true, the handler function executes.

The live method can also be bound to the specified element (or "context") without binding to the document, such as:

The code is as follows	Copy Code
$ (' A ', $ (' #container ') [0]). Live (...); 　　 . Delegate () $ (' #container '). Delegate (' A ', ' click ', function () {alert ("that Tickles!")});

　　
The jquery scan document finds $ (' #container '), binds the handler function to his click event, and the ' a ' CSS selector acts as a function parameter. When an event bubbles to $ (' #container '), check that the event is not click and check that the target element is not matching the CSS selector, and if both are compliant, execute the function.

Note that this is similar to the. Live () method, except to bind the event to a specific element and to the difference between the elements. Smart js ' Er may be summed up as $ (' a '). Live () = = $ (document). Delegate (' A '), really? No, not all of it.

Why. Delegate () Better than. Live ()
JQuery's delegate method should be preferred over live methods for a reason. Consider the following scenario:

The code is as follows	Copy Code
$ (' a '). Live (' click ', function () {blah ()}); Or $ (document). Delegate (' A ', ' click '), function () {blah ()});

　　

Speed
The second one above executes faster than the first, because the first one walks through the entire document looking for the $ (' a ') element and saves it as a jquery object, the live method simply passes a string argument ' a ', and the $ () method does not know that we'll use a chained expression in the back. Live ().

The delegate method simply needs to find and store the $ (document) element.

One hack calls the live method outside of the $ (document). Ready (), which is executed immediately. At this point, the DOM is not populated, and the element is not found or the jquery object is created.

Flexibility and chain syntax
The live approach is still confusing. Think about it, it's chained to the $ (' a ') object, but it actually works on the $ (document) object. For this reason, using live in chained expressions is disturbing, and I think the live method becomes a global jquery method $.live (' A ',...) makes more sense.

Only CSS selectors are supported
Finally, the live method has one of the biggest drawbacks, only using CSS selector, it is inconvenient to use.

For the disadvantage of CSS selectors, see Exploring JQuery. Live () and. Die ().

Original Author update

Why use. Live () or. Delegate () instead of. Bind ()
Finally, the Bind method looks clearer and more straightforward, doesn't it? But here are two reasons we recommend delegate or live:

• Bind event handler function to elements that do not yet exist in the DOM. The Bind method binds functions directly to each individual element and cannot bind to elements that have not yet been added to the page, if you write $ (' a '). Bind (...), and then add new links to the page with Ajax, and the newly added links do not bind events. Live or delegate or any other event bound to an ancestor element, so that existing elements, or later added elements, can be used.
• Bind processing functions to an element or a few elements, listening for descendant elements instead of binding 100 identical processing functions to individual elements. This has a more performance advantage.
Block bubbling
Finally, notice the event bubbling. In general, we can block other handler functions in this way:

The code is as follows	Copy Code
$ (' a '). bind (' click ', function () { E.preventdefault (); Or E.stoppropagation (); })

But here, events bound with the live or delegate method are passed to the place where the event is actually bound to execute. And then other functions have been executed.