The difference between bind and live in jquery

<span id="Label3"></p><p><p><span style="font-family: 宋体; font-size: 12px;">There are three ways to bind events in Jquery: take the Click event as an example</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(1) Target.click (function () {});</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(2) target.bind ("click", function () {});</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(3) target.live ("click", function () {});</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">The first method is very good understanding, in fact, and the use of ordinary JS almost, just a few on the second to third method are bound events, 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 use, especially to pay attention to the difference between them.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">"the difference between bind and live"</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">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.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">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:</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">$ (". clickme"). Live ("click", fn);</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">$ ("body"). Append ("<div class= ' clickme ' > Steps </div>" to test the live method);</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">When we click on this new element, the following steps occur in Turn:</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(1) generate a Click event to be passed to the DIV for processing</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(2) because no event is directly bound to the div, the event bubbles directly to the DOM tree</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(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</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(4) execute the Click event bound by Live</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(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</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">$ (event.target). Closest ('. ClickMe ') can find a matching element to Implement.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(6) Pass the test of (5) to execute the bound event if the object that binds the event Exists.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">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.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">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:</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(1) The Bind method can bind any JavaScript event, while the live method supports only click, dblclick, keydown, keypress, keyup,mousedown, mousemove, jQuery1.3, mouseout, mouseover, and Mouseup. in jquery 1.4.1, focus and blue events are even supported (mapped to more appropriate and bubbling focusin and focusout).</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">In addition, in jquery 1.4.1, hover (mapped to "mouseenter Mouseleave") can also be supported.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(2) Live () does not fully support elements found through the DOM traversal method. instead, you should always use The. live () method directly behind a Selector.</span></p></p><p><p><span style="font-family: 宋体; font-size: 12px;">(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 unable to prevent the passing of the event or bubbling</span></p></p><p><p> </p></p></span>