Are there performance drawbacks to using a delegated event handler in JavaScript and jQuery?

Question

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?

Answer 1

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.