The difference between bind and live

Source: Internet
Author: User

There are three ways to bind events in jquery: Take the Click event as an example

(1) (function () {});

(2) Target.bind ("Click", Function () {});

(3) ("Click", Function () {});

The first method is very good understanding, in fact, and the use of ordinary JS almost, just a little less on it

The second to third method is bound to the event, but the two are very different, the following emphasis on the explanation, because this if used in the framework of jquery is a lot of, especially pay attention to the difference between them.

"The difference between bind and live"

The live method is actually a variant of the Bind method, its basic function is the same as the function of the Bind method, is to bind an event for an element, but the bind method can only give the existing element binding event, for the subsequent use of JS and other methods of the new generation of invalid elements, The live method compensates for this flaw in the Bind method, which can also bind the corresponding event to the resulting element. So how does this feature of the live method be implemented? The following is a discussion of the implementation principle.

The reason that the live method can bind the corresponding event to the later generated element is attributed to the event delegate, which means that events bound to ancestor elements can be used on their descendant elements. The processing mechanism of the live method is to bind the event to the root node of the DOM tree, rather than binding it directly on an element. Give an example to illustrate:

$ (". ClickMe"). Live ("click", FN);

$ ("Body"). Append ("<div class= ' ClickMe ' > Steps </div>" To test the Live method);

When we click on this new element, the following steps occur in turn:

(1) Generate a click event to be passed to the DIV for processing

(2) Because no event is directly bound to the Div, the event bubbles directly to the DOM tree

(3) The event continues to bubble until the root node of the DOM tree is bound to the Click event by default on the root node

(4) Execute the Click event bound by Live

(5) Detects whether the object that binds the event exists, and whether the bound event needs to be executed. The detection event object is detected by the

$ ( Closest ('. ClickMe ') can find a matching element to implement.

(6) Pass the test of (5) to execute the bound event if the object that binds the event exists.

Because the live method detects the existence of the object that binds the event only when the event occurs, the live method can implement the subsequent addition of the element and also implement the binding of the event. In contrast, bind determines whether the element that binds the event exists at the time the event is bound, and binds to the current element only, not to the parent node.

Based on the above analysis, the benefits of live are really great, so why use the Bind method? The reason for jquery to retain the Bind method instead of using the live method to replace bind is because live in some cases is not able to completely replace bind. The main differences are as follows:

(1) The Bind method can bind to any JavaScript event, while the live method supports only click, DblClick, in jQuery1.3.

KeyDown, KeyPress, Keyup,mousedown, MouseMove, Mouseout, MouseOver, and MouseUp.

In the jquery 1.4.1, it even supports focus and blue events (mapping to more appropriate and bubbling focusin and

Focusout). In addition, in the jquery 1.4.1, you can also support hover

(Mapped to "MouseEnter MouseLeave").

(2) Live () does not fully support elements found through the DOM traversal method. Instead, it should always be behind a selector

Directly using the. Live () method.

(3) When an element uses the live method to bind an event, if it wants to prevent the event from being passed or bubbled, it must be in the function

return false, just calling Stoppropagation () is not possible to prevent the passing of events or bubbling

The difference between bind and live

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.