CODEWITHSUNDEEP
javascriptjquery
user967451
user967451

Reputation:

Is it better to use .delegate() performance wise?

One of the developers I work with began to write all his code this way:

$('.toggles').delegate('input', 'click', function() { 
   // do something  
});

vs:

$('.toggles').click(function() { 
   // do something  
});

Are there any performance benefits to doing this?

Upvotes: 12

Views: 309

Answers (7)

Mouna Cheikhna
Mouna Cheikhna

Reputation: 39638

There's another addition that you should be aware of concerning the use of on (delegate in older versions) vs click:

if you do this :

 $("a").click(function() {  
  alert("Click on link detected");  
  $(this).after("<a href='#'>New link</a>");  
});

your new link will not be attached to the "a" click handler even though it should because it is a link.

however if you use on :

$("a").on("click", function(event){  
   $(this).after("<a href='#'>Nouveau lien</a>");  
});

with this the new link responds to the click event with the click handler.

Upvotes: 0

Juzer Ali
Juzer Ali

Reputation: 4167

As suggested you can use .on(). As far as your question is concerned, .on() and also .delegate() for that matter has better performance than binding events to the target directly. That is because these binders listens to an element which is higher in the DOM tree and then checks the target, as the pool of your targets increases .on() and .delegate() will surely give you performance benefit.

And in general, they will always be more efficient.

Upvotes: 1

Nemoy
Nemoy

Reputation: 3417

Yes it is. Using .delegate will reduce the number of event handlers.

Suppose you have a table in your page and you want to attach click handler to each <td>. Instead of attaching event handler to individual <td>s attach it to the table:

$("#myTable").delegate("click", "td", function() {
    //do some thing on click of td
});

When you click on the <td> the event will bubble up to the table. Here by using delegate we can reduced the number of event handlers, which improves the performance.

delegate is deprecated in latest version of jQuery use .on instead it works like delegate.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

delegate() is superseded as of jQuery 1.7.

Use .on() instead.

.on() has excellent performance benchmarks. And covers your .click() needs as well as needed

Upvotes: 6

Justin Ethier
Justin Ethier

Reputation: 134167

As frenchie stated, in the latest version of jQuery, both functions end up mapping to jQuery.on.

In the jQuery code, you can see that delegate is really just a wrapper for on:

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

Then, when jQuery binds click (as well as other events) it calls into on as well:

jQuery.each( ("... click ... ").split(" "), function( i, name ) {

// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }

    return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
};
...
});

Upvotes: 2

Dave
Dave

Reputation: 4412

I'm pretty sure that if all the items of class "toggles" are present when that binding is made, that delegate() would be less efficient. It binds to everything of class "toggles", and then, when one of those elements is clicked, checks to see if the actual DOM object being clicked is an input.

click(), on the other hand, is a shortcut for bind(), which binds directly to everything of class "toggle" and always triggers when that DOM item is clicked.

The only reason to use delegate() would be if inputs are added inside items of class "toggle" after the binding is made.

This also applies to using different overloads of on(), which replaces delegate() and bind() (and by replacing bind, also replaces click()).

Upvotes: 0

frenchie
frenchie

Reputation: 51927

Yes, and in fact, there's an even better way to do it, with .on(): take a look at this

Upvotes: 1

Related Questions