jquery binding events (the difference between bind and live)

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

(1) Target.click (function () {});

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

(3) target.live ("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 is able to bind the corresponding event to the post-generated element is attributed to the " Event Delegate above, the so-called "event delegate" means that an event bound to an ancestor element can be used on its 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

$ (event.target). 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, KeyDown, KeyPress, jQuery1.3,

KeyUp, MouseDown, MouseMove, Mouseout, MouseOver, and MouseUp. In jquery 1.4.1, it even supports focus and blue

event (mapped to a more suitable, and can be bubbling on the Focusin and Focusout). In addition, in the jquery 1.4.1, it is also possible to support hover (mapping

To "MouseEnter MouseLeave").

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

Method.

(3) When an element uses the live method to bind the event, if you want to prevent the event from passing or bubbling, return false in the function, just adjust

with stoppropagation () is unable to implement blocking event delivery or bubbling