是否更好地使用.delegate（）性能？

Question

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?

Answer 1

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

Answer 2

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 );
};
...
});

Answer 3

是的，事实上，有一个更好的方法，使用.on（） ：看看这个

Answer 4

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.

Answer 5

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()).

Answer 6

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.

Answer 7

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.