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

i using delegated event handler (jquery) in javascript code stuff happens when dynamically added buttons clicked.

i'm wondering there performance drawbacks this?

// delegated event handler $(document).on('click', '#dynamicallyaddedbutton', function(){     console.log("hello"); }); 

how compare this, performance-wise?

// regular event handler $("#regularbutton").on('click', function(){     console.log("hello again"); }); 

looking @ jquery documentation, seems events bubble way dom tree. mean further nested element is, longer event take work?

edit: is there performance benefit using javascript's event delegation rather jquery's? asking similar question, , answer there useful. wondering difference between using regular event handler , delegated event handler. linked questions make seem events bubbling dom tree. delegated event handler event bubble top , down specified element?

every time click pretty anywhere in document, event going manually bubbled document element (after natural bubbling takes place) , run selector engine every element between clicked element , document.

so if click on element nested 20 elements deep, selector engine run 20 times 1 click.

furthermore, happen every selector document has. if give 20 selectors , click 20 elements deep, selector engine has run 400 times 1 click. (the manual bubbling happens once, of course.)

selector-based delegation fine, try keep closer targeted element(s) if possible.