Jquery event binding method. bind (). live (). delegate () Usage

In jquery, event binding methods are divided. bind (). live (). delegate (). Next I will give you a brief introduction to the three event binding methods. For more information, see.

Basic

First, graphical HTML documents can help us better understand. A simple HTML page looks like this

Event bubbling aka event propagation)
Click a link to trigger the click Event bound to the link element, and then trigger the function bound to the click Event of the element.

The Code is as follows:	Copy code
$ ('A'). bind ('click', function () {alert ("That tickles! ")});

Therefore, one click triggers an alert.

The click event is then transmitted from the DOM tree to the parent element and then to each ancestor element.

In the DOM tree, document is the root node.
Now we can easily explain the differences 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 binding method. The jQuery scan document finds all $ ('A') elements and binds the handler for the click event of each element.

. 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 uses 'click' and 'A' as the parameters of the function. When an event bubbles to the document node, check whether the event is a click event and whether the target element matches the 'A' css selector. If both conditions are true, the processing function is executed.

The live method can also be bound to a specified element (or "context") instead of a document. For example:

The Code is as follows:	Copy code
$ ('A', $ ('# iner') [0]). live (...); 　　 . Delegate () $ ('# Iner'). delegate ('A', 'click', function () {alert ("That tickles! ")});

　　
Find $ ('# iner') in the jQuery scan document, bind the processing function to its click event, and the 'A' css selector serves as the function parameter. When an event bubbles to $ ('# iner'), check whether the event is clicked and whether the target element matches the css selector. If both are consistent, execute the function.

Note that this time it is very similar to the. live () method, except for binding an event to a specific element. The Savvy JS 'er may sum up to $ ('A'). live () = $ (document). delegate ('A'). Is that true? No, not all.

Why. delegate () is better than. live ()
There is one reason why jQuery's delegate method is preferred than the live method. Consider the following scenarios:

The Code is as follows:	Copy code
$ ('A'). live ('click', function () {blah ()}); // Or $ (Document). delegate ('A', 'click', function () {blah ()});

　　

Speed
The second execution above is faster than the first one, because the first will traverse the entire document to find the $ ('A') element and save it as a jQuery object, but the live method only needs to pass a string parameter 'A'. The $ () method does not know that we will use a chained expression later. live ().

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

One kind of hack is to call the live method outside $ (document). ready (), so that it will be executed immediately. At this time, the DOM is not filled, so it does not look for elements or create jQuery objects.

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

Only the css selector is supported.
Finally, the live method has one of the biggest drawbacks. It can only be used with css selectors, which is inconvenient to use.

For more information about the shortcomings of the css selector, see using ing jQuery. live () and. die ().

Original Author update

Why use. live () or. delegate () instead of. bind ()
Finally, the bind method looks clearer and more direct, right? But we recommend delegate or live for two reasons:

• Bind the event handler function to the element in the DOM that does not exist. The bind method binds the function directly to each individual element. It cannot be bound to any element not added to the page. If you write $ ('A'). bind (...), Then add a new link to the page using ajax. The newly added link will not be bound to events. Live, delegate, or other events bound to the ancestor element can be used for existing or later elements.
• Bind the handler to an element or a few elements to listen to the child element, instead of binding 100 identical handler functions to a separate element. This gives you more performance advantages.
Prevents bubbles
Finally, pay attention to event bubbling. Generally, we can use this method to block other processing functions:

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 will be passed to the place where the event is actually bound for execution. At this time, other functions have been executed.