Differences between jQuery binding methods-. bind ()/. live ()/. delegate ()/. on ()

Introduction

This article only translates the key content of the original article, covering almost all the original content. If you still have doubts, please refer to the original article. The address is given at the bottom of the article.

 
 
    
      
  
  
 John Resig 
jQuery Core Lead
 
Boston, United States
 
    
  
 
 

Bind Method

The bind method registers the event type and event handle to all DOM elements that meet the selector conditions. This method has been tested for a long time and is direct and reliable, but it may cause some performance problems. As follows:

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

The effects of the above two methods are the same. All links are independently bound to the same event control handle, which is a waste of resources.

Advantages-Cross-browser, convenient and fast, supports quick methods (. click (),. hover (), etc.), and fast response when an event is triggered.

Disadvantage-Each element is bound to a copy of the same handle (the correct method is to bind a reference to the same handle). When there are many elements that cannot be dynamically added, performance problems may occur and the page loading speed may be affected.

Live Method

Live uses the concept of event delegation, and its calling method is similar to bind. It binds the event handle together with the selector and event information to the document, so that the event handle can act on all events. When the event bubbles to the document, jQuery checks the selector and event to determine whether to call the handle. This method may affect performance more or less during user operations, but it is very fast during initial registration.

/* The .live() method attaches the event handler to the root level    document along with the associated selector and event information    ( "#members li a" & "click" ) */  $( "#members li a" ).live( "click", function( e ) {} );

Compared with bind, the above Code only needs to bind the event handle to the document, without binding all DOM elements that meet the conditions one by one. This is not only efficient, but also resource saving, but does not mean that this solution is flawless.

Advantages-Compared with the bind method, only one event handle instance is required. The update from bind to live is very small. You only need to replace the method name and dynamically add it to the DOM tree, the elements that meet the selector conditions can also work as expected, because the document element is not a real target DOM element during actual binding, and the handle binding can be completed before the ready event of the document, make full use of the loading time.

Disadvantage-This method is not recommended in jQuery 1.7. This method is difficult to control chained operations. The elements selected in the selector are basically voided because the event handle is registered to the document; event. stopPropagation () no longer works, because the document has full permission to proxy all events; because all selector and event information are bound to the document, therefore, when an event occurs, jQuery will use matchesSelector to find matching items from a large amount of information to execute the corresponding event handle. The event will be continuously transmitted to the document, if the DOM layer is deep, the performance will be affected.

Delegate Method

The implementation of delegate is similar to live, but it is not required to be bound to a document. developers can decide to bind elements on their own.

/* The .delegate() method behaves in a similar fashion to the .live()    method, but instead of attaching the event handler to the document,    you can choose where it is anchored ( "#members" ). The selector    and event information ( "li a" & "click" ) will be attached to the    "#members" element. */ $( "#members" ).delegate( "li a", "click", function( e ) {} );

The delegate function is very powerful. The above code registers the event handle and event information together to the unordered list ("# members "). This is much more efficient than live's practice of always registering a document. In addition, delegate solves many other problems.

Advantages-The target binding element can be specified. The selector is not executed in advance, but is used to register the root element. The chain operation is supported. jQuery still facilitates content registration to find matching selector and events, the data size is much smaller than that of document. It is applicable to dynamically added elements. If the bound object is document, the binding operation can be performed before the ready event of document.

Disadvantage-The transition from bind to delegate is not smooth, because there are discrepancies in the method signature after all. jQuery will use matchesSelector and determine which handle to call based on the selector and event information stored in the root element, the quantity of storage information is not negligible, but it is smaller than live.

On Method

We know that the underlying layers of bind, live, and delegate are implemented by the new method on in jQuery 1.7, while unbind, die, and undelegate are implemented by off. For details, see the following code:

// ... more code ... bind: function( types, data, fn ) {    return this.on( types, null, data, fn );},unbind: function( types, fn ) {    return this.off( types, null, fn );}, live: function( types, data, fn ) {    jQuery( this.context ).on( types, this.selector, data, fn );    return this;},die: function( types, fn ) {    jQuery( this.context ).off( types, this.selector || "**", fn );    return this;}, delegate: function( selector, types, data, fn ) {    return this.on( types, selector, data, fn );},undelegate: function( selector, types, fn ) {    return arguments.length == 1 ?         this.off( selector, "**" ) :         this.off( types, selector, fn );}, // ... more code ...

The usage of on is as follows:

/* The jQuery .bind(), .live(), and .delegate() methods are just one    line pass throughs to the new jQuery 1.7 .on() method */ // Bind$( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} );  // Live$( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); // Delegate$( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );

On looks like a method with different signatures and is overloaded.

Advantages-Provides consistent solutions for various event binding methods. jQuery code is simplified without the need to use bind, live, and delegate for secondary calls. With all the advantages of the delegate method, at the same time, it has the benefits provided by the bind method.

Disadvantage-A little messy. Its behavior depends on the method called.

Summary

How to use appropriate methods in appropriate scenarios:

The bind method has a high overhead because it attaches the same event handle to each element filtered by the selector.
Do not use the live method because it has been officially positioned as deprecated, and there are still many problems in use.
Delegate is a value-for-money solution that can meet both performance requirements and dynamically add elements.
The new on method is a syntactic sugar that replaces bind, live, and delegate.
The new direction is to use the on method. Get familiar with its syntax and start to use it in jQuery 1.7 + projects.

Reference:
Http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/
Https://gist.github.com/elijahmanor/1749717