Introduction to the difference between bind and live binding events in Jquery

JqueryThere are three ways to bind events: 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 easy to understand. In fact, it is similar to the usage of ordinary JS, but it is missing. Just one on

The second and third methods are all binding events, but they are very different. Let’s focus on explaining this, because if you use JqueryFramework is used a lot, especially the difference between the two should be paid attention to.

[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 bind method. In the same way, an event is bound to an element, but the bind method can only bind events to currently existing elements, and is invalid for newly generated elements using JS or other methods afterwards. The live method just makes up for the disadvantages of the bind method. This defect can also bind corresponding events to later generated elements. So how is this feature of the live method implemented? Let’s discuss its implementation principle below.

The reason why the live method can also bind corresponding events to the elements generated later is attributed to the "Event Delegate". The so-called "event delegation" means that events bound to ancestor elements can be used on descendant elements. The processing mechanism of the live method is to bind the event to the root node of the DOM tree instead of directly binding it to an element. Give an example to illustrate:

   $(".clickMe").live("click",fn);
             $("body").append("<p class=&#39;clickMe&#39;>测试live方法的步骤</p>");

## When we click on this

add element, it will The following steps occur in sequence:

(1) Generate a click event and pass it to p for processing

(2) Since there is no event directly Bound on p, so the event bubbles directly to the DOM tree

(3) The event continues to bubble until the root node of the DOM tree. By default, the root node This click event is bound

(4) Execute the click event bound by live

(5) Detect the bound event

Object Whether it exists or not determines whether the bound event needs to continue to be executed. Detecting event objects is achieved by detecting whether $(event.target).closest('.clickMe') can find matching elements.

(6) After passing the test of (5), if the object bound to the event exists, the bound event will be executed.

         

Since the live method will detect whether the object bound to the event exists only when the event occurs, the live method can implement later added elements. Event binding can also be implemented. In contrast, bind will determine whether the element to which the event is bound exists during the binding phase of the event, and will only bind to the current element, not to the parent node.

According to the above analysis, the benefits of live are really great, so why should we use the bind method? The reason why jquery retains the bind method instead of using the live method to replace bind is because live cannot completely replace bind in some cases. The main differences

are as follows:

(1) The bind method can bind any JavaScript event, while live In jQuery 1.3, the method only supports click, dblclick, keydown, keypress,

             keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. In jQuery 1.4.1, even focus and blue are supported

event (mapped to focusin and focusout that are more appropriate and can bubble). In addition, in jQuery 1.4.1, hover is also supported (mapping

to "mouseenter mouseleave").

(2) live() does not fully support elements found through DOM traversal. Instead, you should always use the .live()

## method directly after a selector.

(3) When an element uses the live method to bind events, if you want to prevent the event from being delivered or bubbling, you must return false in the function and just call

It is impossible to prevent the delivery or bubbling of events using stopPropagation()

The above is the detailed content of Introduction to the difference between bind and live binding events in Jquery. For more information, please follow other related articles on the PHP Chinese website!