5

Is there someone who might be able to explain why using a function such as:

$('#potato').delegate('.frenchFry', 'click', function(e){
    // do something...
});

is better than:

$('#potato').bind('click', function(e){
    if($(e.target).hasClass('frenchFry'){
        // do something...
    }
});

Assuming a large number of delegations on a very dynamic and constantly changing #potato? Is there a speed advantage to using delegate (not from any tests I could come up with)?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
borbulon
  • 1,391
  • 1
  • 11
  • 11
  • a really nice question. hate to vote close for this. but its already asked and well answered ( none less than 3 heavy weights). possible duplicate of [Jquery live() vs delegate()](http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate) – naveen Aug 11 '11 at 16:10
  • 1
    This might be helpful http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ – shashi Aug 11 '11 at 16:11
  • @naveen: That question isn't a duplicate of this at all. OP isn't asking about `.live()`. He's asking about performing your own event delegation vs using jQuery's event delegation via `.delegate()`. – user113716 Aug 11 '11 at 16:16

1 Answers1

4

Because e.target will refer to the most deeply nested element clicked, which may not have the class you're looking for.

<div class="frenchFry>
    <span>some nested text</span>
</div>

$(e.target).hasClass('frenchFry') // click on the <span> will return "false"

If you're certain that the actual e.target will always be the element you intend, then this won't be an issue.

Having a selector based .delegate() that tests more than just the e.target itself simply makes it a little more dynamic.

EDIT: By the way, you could sort of replicate .delegate() something like this:

var node = e.target;

while( node && !$(node).is('.frenchFry') ) {
    node = node.parentNode;
    if( node === this || node === document.body ) {
        node = null;
        break;
    }
}

if( node ) {
    // do something
}
user113716
  • 318,772
  • 63
  • 451
  • 440
  • 1
    @naveen: Not of the question you linked. – user113716 Aug 11 '11 at 16:14
  • 2
    @Naveen - This is not `.live` vs `.delegate`. This is comparing jQuery's `.delegate` to a homemade delegated click handler (and `.live` works differently, anyway). – karim79 Aug 11 '11 at 16:17
  • hi guys - i had actually looked for this specific question, and true, it's not about live vs delegate. it's about delegate vs a more home-brewed version. patrick - i was just giving a quick example, but yes, i agree about the "not sure if e.target is the target you're looking for" thing. though i think with that i've used closest() or $(e.target) || $(e.target).parent() to manage those issues. i'd be a little wary of using your while() statement in a function with a long list of selectors to look through, and for a short, one-off type of function i'd most likely use delegate(). – borbulon Aug 11 '11 at 17:28
  • @el_bob: jQuery's `.delegate()` is meant to be simple and easy. But because it is running the selector for the target as well as every ancestor until `this` or a match is reached, it will never perform as well as delegate handlers that are designed with a specific task in mind. The `while` was just an illustration of (basically) what `.delegate()` does. If you have many possibilities to test for, and desire optimum performance per click (at the expense of a little more code), then a generalized solution like `.delegate()` isn't what you want. – user113716 Aug 11 '11 at 18:17
  • 1
    @patrick - yeah, thanks - it's the conclusion i had come to as well, just figured i'd throw the question out there in case there was something i was missing. – borbulon Aug 11 '11 at 19:01