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

admin管理员组

文章数量:1391987

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 pare 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?

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 pare 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?

• javascript
• jquery
• performance
• dom

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jun 18, 2015 at 17:49 jabejabe 84422 gold badges1717 silver badges3333 bronze badges 5

• 1 Yes but not in any noticeable manner unless you have hundreds of delegated event handlers and extremely plex markup. – user4639281 Commented Jun 18, 2015 at 17:51
• possible duplicate of Javascript Delegation performance considerations. Plus stackoverflow./q/25552804/1427878, stackoverflow./q/24964448/1427878 – C3roe Commented Jun 18, 2015 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. – user1106925 Commented Jun 18, 2015 at 17:55
• 1 Well, then go with the last one i mentioned, stackoverflow./q/24964448/1427878 – C3roe Commented Jun 18, 2015 at 17:59
• 1 Sort of, but this one is asking about a parison of jQuery delegation vs jQuery direct binding. The that one is paring jQuery to no jQuery. Answers would touch on similar information. Judgement call I guess. – user1106925 Commented Jun 18, 2015 at 18:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： Are there performance drawbacks to using a delegated event handler in JavaScript and jQueryStack Overflow