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 ordinary JS usage is similar, just one less on
The second to third method is the binding event, but the two are very different, the following highlights, because this if the use of the framework of jquery is very much, especially to pay attention to the difference between the two.
"The difference between bind and live"
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 current existing element binding events, for the subsequent use of JS, such as the new generated element is invalid, While the live method compensates for this flaw in the bind method, it can also bind the corresponding events to the resulting elements. So how is this feature of the live method implemented? Here's how to implement the principle.
The reason why the live method can bind the corresponding events to the later generated elements is attributed to the "event delegate", which means that events bound on 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 to bind directly to an element. Give an example to illustrate:
Copy Code code as follows:
$ (". ClickMe"). Live ("click", FN);
$ ("Body"). Append ("<div class= ' ClickMe ' > Test live Method Steps </div>");
When we click on this new element, the following steps occur in sequence:
(1) Generate a click event, passed to the div to do the processing
(2) Since no events are directly bound to the Div, the event bubbles directly onto the DOM tree
(3) event bubbling until the root node of the DOM tree, by default, the Click event is bound on the root node
(4) Perform a live-bound click event
(5) Detects whether the object that binds the event exists, and whether the bound event needs to be continued. The detection event object is detected by the
$ (event.target). Closest ('. ClickMe ') can find a matching element to implement.
(6) Pass (5) The test, if the object that binds the event exists, executes the bound event.
Because the live method only detects the existence of the object that binds the event when the event occurs, the live method can implement the new element and bind the event later. In contrast, bind determines whether an element of a bound event exists at the binding stage, and only binds to the current element, not to the parent node.
According to the analysis above, the benefits of live are really great, so why use the Bind method? The reason jquery retains the bind method instead of using the live method instead of bind is because live is not a complete replacement for 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, jQuery1.3. Mouseout, MouseOver, and MouseUp. In the jquery 1.4.1, focus and blue are even supported
Events (mapped to more appropriate and bubbling focusin and focusout). In addition, hover (mapped to "MouseEnter MouseLeave") can also be supported in the jquery 1.4.1.
(2) Live () does not fully support elements found by means of the DOM traversal. Instead, you should always use the. Live () method immediately after a selector.
(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 call stoppropagation () is not able to prevent the event from passing or bubbling
