1

Whenever I read about event registration in jQuery they all say that we should try to add event handlers to the nearest parent, and avoid adding event listeners to the document, because according to resources they are slow and not efficient.

But why they are slow? Apparently it's because the event will have to bubble up to the document, which will take time. Then it will be compared to a list of selectors to call, e.g.

$(document).on("click", ".abc", function(){  })
$(document).on("click", ".abc2", function(){ })

So here if I click an element, the click event will be bubble up to the document and then it will match the selector list (".abc, .abc2")...and that is inefficient. OK I got it but what if I have only have one selector in the list ? e.g.

$(document).on("click", "*", function(){  })

Will it be slow too ? If so why?

Basically i'm trying to create a google's jsaction similer lib, so I will write like this:-

$(document).on("click", "[jsaction]", function(){  })

Because this will be the only selector, so i don't think it will be slow ? or will it be ?

and if attaching event to document is not efficient, then what about a completely ajax application? my application is completely ajax, and every page will be downloaded by ajax. Is there another, more efficient solution?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vikram Chhipa
  • 113
  • 1
  • 15
  • 1
    Possible duplicate of [Should all jquery events be bound to $(document)?](http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document) – Rino Raj Mar 30 '16 at 12:35
  • Actually i m asking why it is slow and , mine is different situation then the reason given in that question's answer. he is saying because it had to match that event to list of selectors but what if there is only one selector to match ? so just performace lost will be time to reach to document ? not sure :( – Vikram Chhipa Mar 30 '16 at 12:38
  • @vikram actually the answer provided by Rino Raj does a pretty good job of explaining *why* it's slow - because there is a lot of overhead involved with looking up the DOM tree a bunch of times all the way to the document level – jonny Mar 30 '16 at 12:39
  • But what if my pages are downloaded by ajax completely ? then there is not any solution , right ? – Vikram Chhipa Mar 30 '16 at 12:43
  • 1
    If the entire page is downloaded using AJAX, and there is no other alternative, just use delgated handlers at the document level anyway. But if you can avoid it (by, for instance, creating a wrapper in the page which can be injected into *and* act as the delegate target), then do so – jonny Mar 30 '16 at 12:48

1 Answers1

1

Event delegation basically uses 2 different process,

  1. The event bubbling, For example, when you click over an element that event will be bubbled up to the document to fire the relevant event.
  2. The match, after reaching the document(during event bubbling) the fellow who caused the event bubbling will be verified with the selectors attached with document. If it matches then the relevant event will be fired.

So you are advocating about the match by stating a generic selector. To be frank, matching 2 or 3 elements will take less time than traversing up to the document during event bubbling. At that case if you use a static closest parent instead of document, the traversing time will be reduced and that will hike the performance.

Though match takes less time, when it comes with 15+ elements for matching, that will also affect the performance even when you use closest parent instead of document.

So the summary is, we have to use event delegation sparingly with common sense by knowing the above two different process takes place under the hood.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • can a user can notice that performance loss ? or that is just for benchmarks ? i think it also depend on cpu and browser speed as well ? right ? i may be wrong thanks – Vikram Chhipa Mar 30 '16 at 13:57