JavaScript---. bind (). The difference between live (). Delegate () on ().

The difference between. Bind (). Live (). Delegate (). On ()

Cases:

$ (selector). Bind (event,data,function) $ (selector). Live (Event,data,function)// jquery1.9 version below support, jquery1.9 and above version removed this method, jquery1.9 above version with the on () method instead of $ (selector). Delegate (Childselector,event,data, function)//jquery1.4.2 and above version; $ (selector). On (event,childselector,data,function)// jquery1.7 and above; jquery1.7 version is used to replace bind (), Live () bind event mode;

Event: Required item; One or more events added to the element, such as Click,dblclick, etc.;

Single Event handling: for example $ (selector). bind ("click", Data,function);

Multi-Event Processing: 1. Use spaces to separate multiple events, such as $ (selector). bind ("Click Dbclick mouseout", data,function);

2. Use braces to flexibly define multiple events, such as $ (selector). Bind ({event1:function, event2:function, ...})

3. Space Separation Method: Binding is more rigid, can not give the event of a separate binding function, suitable for handling multiple events call the same function;

Brace substitution: The binding is more flexible and can be used to bind functions individually;

Data: Optional; parameters to be passed;

function: required; functions that need to be executed when a binding event occurs; All versions are applicable, but according to the official website, the bind () function is recommended to replace with on () since the jquery1.7 version. 1,. bind () is directly bound to the element, but also a good solution to the browser in event processing compatibility issues. If not artificially set stoppropagation (Moder Browser), cancelbubble (IE), then all its parent elements, ancestor elements will be affected

$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

When we click on a, we first trigger the Click event that it is bound to, and then go all the way up, triggering its parent element, and all the binding click events on the ancestor element.

/* The. Bind () method attaches the event handler directly to    the DOM element in question ("#members li a"). The. Click () method is    just a shorthand-to-write the. bind () method. */$ ("#members li a"). Bind ("click", Functio N (e) {}); $ ("#members li a"). Click (function (e) {});  

. Click (),. Hover () ... These very handy event bindings are a simple way to handle bind. It is very good for the elements selected with the ID, not only to hook up quickly (because a page has only one ID), and when the event occurs, handler can be executed immediately (relative to the subsequent live, delegate) implementation

Disadvantages:

• It binds events to all of the selected elements.
• It is not bound to those elements that are added dynamically after it finishes executing
• When there are many elements, there is an efficiency problem.
• You can do bind () when the page is finished loading, so you may have an efficiency problem

2. Live () is bound to the element in a bubbling manner. More appropriate for the list type, bound to the document DOM node. Once the event bubbles to the document, jquery will look for selector/event metadata and then decide which handler should be called. When handler is executing, there are some delays due to bubbling participation, but the binding is particularly fast. One advantage when compared to. bind () is that we do not need to bind events on each element, only one binding on the document. Although this is not the quickest way, it is indeed the least wasted.

Advantages:

• There is only one event binding here, binding to document instead of binding all elements like. bind ().
• Those dynamically added Elemtns can still trigger events that were previously bound because the actual binding of the event is on the document
• You can bind the required events before the document is ready.

Disadvantages:

• It has not been recommended since 1.7, so you have to start phasing it out.
• Chaining not being properly supported.
• It is useless to use event.stoppropagation () because all the document is to be reached
• Because all selector/event are bound to document, it is very slow when we use the Matchselector method to elect that event to be invoked.
• There is a performance problem when the element of the event is deep in your DOM tree

3. Delegate () is a more accurate, small-scale use of event proxies with better performance than. Live (). It doesn't bind all of the event to document, but it's up to you to decide where to put it. The same place as live () is the event delegation.

Advantages:

• You can choose to put the event on that element.
• Chaining's been properly supported.
• jquery still needs to iterate over all the selector/event data to determine which child element to match, but because you can decide on that root element, you can effectively reduce the element you are looking for.
• Can be used on dynamically added elements

Disadvantages:

• You need to find that element that happened, though much less than document, but you still have to waste time to find it.

4. On () is the latest 1.9 version of the new event binding mechanism that incorporates the previous three ways: Bind (),. Live (),. Delegate () are all implemented by. On (),. Unbind (),. Die (),. Undelegate (), The same is true with. Off ().

JavaScript---. bind (). The difference between live (). Delegate () on ().