Jquery binding events (differences between bind and live)

There are three ways to bind events in Jquery: Taking the click event as an Example

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

(2) target. bind ("click", function (){});

(3) target. live ("click", function (){});

The first method is easy to understand. In fact, it is similar to the common JS usage, but it is just missing an on

The second and third methods both bind events, but the two are quite different. The following describes the differences, because Jquery's framework is used in many ways, pay special attention to the differences between the two.

[Difference between bind and live]

The live method is actually a variant of the bind method. Its basic functions are the same as those of the bind method. They all bind an event to an element, however, the bind method can only bind events to existing elements. It is invalid for elements generated by using JS and other methods afterwards, while the live method just makes up for this defect of the bind method, it can bind the generated elements to corresponding events. So how does the live Method Implement this feature? The following describes how it works.

The reason why the live method can bind the generated elements to the corresponding events is that the "event Delegate, the so-called "event Delegate" means that events bound to the ancestor element can be used on its child element. The processing mechanism of the live method is to bind the event to the root node of the DOM tree, instead of directly binding the event to an element. Here is an example:
Copy codeThe Code is as follows:
$ (". ClickMe"). live ("click", fn );
$ ("Body"). append ("<div class = 'clickme'> steps for testing the live method </div> ");

When we click this new element, the following steps are taken in sequence:

(1) generate a click event and pass it to div for processing.

(2) because no event is directly bound to the div, the event is directly bubbling to the DOM tree.

(3) events are continuously bubbling until the root node of the DOM tree binds the click event to the root node by default.

(4) execute the click Event bound by live.

(5) check whether the Bound event object exists and determine whether to continue binding events. The event object is detected

Whether the matching element can be found in condition (event.tar get). closest ('. clickMe.

(6) through the (5) test, if the Bound event object exists, the bound event will be executed.

The live method checks whether the Bound event object exists only when an event occurs. Therefore, the live method can bind events to new elements or events. In contrast, the bind determines whether the element of the binding event exists in the event binding phase, and only binds the current element instead of the parent node.

According to the above analysis, the benefits of live are really great. Why should we use the bind method? The reason why jquery should retain the bind method instead of using the live method to replace bind is that live cannot completely replace bind in some cases. The main differences are as follows:

(1) The bind method can bind any JavaScript event, while the live method only supports click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, and mouseover in jQuery1.3, and mouseup. in jQuery 1.4.1, focus and blue are even supported.

Events (mapped to focusin and focusout that are more appropriate and can be bubbling ). In addition, hover (mapped to "mouseenter mouseleave") is also supported in jQuery 1.4.1 ").

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

(3) When an element binds an event using the live method, if you want to prevent the event from being transmitted or bubbling, you must return false in the function and only call stopPropagation () it is impossible to prevent the passing or bubbling of events.