Jquery binding event (introduction to the difference between bind and live)_jquery

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 easy to understand. In fact, it is the same as ordinary The usage of JS is similar, except that one on is missing

The second and third methods are all binding events, but they are very different. Let’s focus on explaining this, because if you use Jquery The framework is used quite a lot, so we should pay special attention to the difference between the two.

[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. They both bind an element to an element. Events, but the bind method can only bind events to currently existing elements, and is invalid for newly generated elements using JS and other methods. The live method just makes up for this flaw of the bind method, and it can also be used for later generated elements. Bind the corresponding event. 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 later generated elements is attributed to "event delegation". 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:

Copy code The code is as follows:

$(".clickMe" ).live("click",fn);
$("body").append("

Steps to test the live method

");

When we click on this new element, the following steps will occur:

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

(2) Since no event is directly bound to the div, the event bubbles directly to the DOM tree

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

(4) Execute the click event bound by live

(5) Detect whether the object of the bound event exists, and determine whether it is necessary to continue to execute the bound event. Detecting event objects is achieved by detecting whether

$(event.target).closest('.clickMe') can find matching elements.

(6) Through 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 an event occurs, the live method can implement later added elements and event binding. 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 the live method only supports click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout in jQuery1.3 , mouseover, and mouseup. In jQuery 1.4.1, focus and blue

events are even supported (mapped to the more appropriate focusin and focusout that can bubble). In addition, in jQuery 1.4.1, hover (mapped to "mouseenter mouseleave") is also supported.

(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. Simply calling stopPropagation() cannot prevent it. Event delivery or bubbling