7

I am using a delegated event handler (jQuery) in my JavaScript code so stuff happens when dynamically added buttons are clicked.

I'm wondering are there performance drawbacks to this?

// Delegated event handler
$(document).on('click', '#dynamicallyAddedButton', function(){
    console.log("Hello");
});

How would it compare to this, performance-wise?

// Regular event handler
$("#regularButton").on('click', function(){
    console.log("Hello Again");
});

Looking at the jQuery documentation, it seems that events always bubble all the way up the DOM tree. Does that mean that the further nested an element is, the longer an event will take to work?

Edit: Is there a performance benefit to using JavaScript's event delegation rather than jQuery's? is asking a similar question, and the answer there is useful. I am wondering what the difference is between using a regular event handler and a delegated event handler. The linked questions make it seem like events are constantly bubbling up the DOM tree. With a delegated event handler does the event bubble up to the top and then back down to the specified element?

Community
  • 1
  • 1
jabe
  • 784
  • 2
  • 15
  • 33
  • 1
    Yes but not in any noticeable manner unless you have hundreds of delegated event handlers and extremely complex markup. –  Jun 18 '15 at 17:51
  • possible duplicate of [Javascript Delegation performance considerations](http://stackoverflow.com/questions/16990440/javascript-delegation-performance-considerations). Plus http://stackoverflow.com/q/25552804/1427878, http://stackoverflow.com/q/24964448/1427878 – CBroe Jun 18 '15 at 17:53
  • @CBroe: I don't think that's a good duplicate. He's asking about jQuery's system, which has much greater overhead than your typical, targeted event delegation. –  Jun 18 '15 at 17:55
  • 1
    Well, then go with the last one i mentioned, http://stackoverflow.com/q/24964448/1427878 – CBroe Jun 18 '15 at 17:59
  • 1
    Sort of, but this one is asking about a comparison of jQuery delegation vs jQuery direct binding. The that one is comparing jQuery to no jQuery. Answers would touch on similar information. Judgement call I guess. –  Jun 18 '15 at 18:04

1 Answers1

10

Every time you click pretty much anywhere in the document, the event is going to be manually bubbled up to the document element (after the natural bubbling takes place) and will run the selector engine for every element between the clicked element and the document.

So if you click on an element nested 20 elements deep, the selector engine will run 20 times for that one click.

Furthermore, this will happen for every selector the document has. So if you give it 20 selectors and click 20 elements deep, the selector engine has to run 400 times for that one click. (The manual bubbling happens only once, of course.)

Selector-based delegation is fine, but try to keep it closer to the targeted element(s) if possible.

  • So on a delegated event handler, does it have to bubble up to the top and back down to the specified element? It is strange that dynamically added elements can't have regular event handlers if events bubble up to the top every time they are clicked. – jabe Jun 18 '15 at 18:20
  • @jabeoogie: They can have regular handlers but you need to manually assign them when they're created. IMO, that's not a bad idea. Or did I misunderstand what you meant? –  Jun 18 '15 at 20:33
  • To give an overview, the "bubbling" happens irrespective of any handlers being assigned. It actually starts at the top and goes down to the `event.target` first. This is called the "capturing" phase. It then bubbles back up to the top. This is the bubbling phase. That's where the jQuery-bound handler is fired. jQuery then manually starts back at the `event.target` and tests the selector(s) against the current element in a loop, traversing up the `.parentNode`s until the original bound element is reached. –  Jun 18 '15 at 20:37