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.
Comments
Post a Comment