performance difference using jQuery's on() function

Question

I was just wondering which way is more efficient or if there is any difference in the cost of this operation:

    A) $(document).on('click', '#lol', function(){alert('hello')})

vs

    B) $('#lol').on('click', function(){alert('hello')})

I know the latter won't work if the element with ID 'lol' gets appended to the DOM after the ready function is executed. I've just sort of adopted using implementation A everywhere just as best practice since it keeps all the event code the same regardless of the element I'm targeting. So I'm wondering is there a downside to using option A all the time?

j08691 · Accepted Answer · 2015-04-22 20:29:06Z

5

Yes, you shouldn't use document whenever possible and instead use an element that's closer to the target.

From the on() docs (emphasis mine):

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

answered Apr 22, 2015 at 20:29

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

Congrats on the 100k :)

Aram · Accepted Answer · 2015-04-22 20:35:32Z

2

@j08691's answer is perfect in case of one or few elements on page, but if we bind click event to thousands of elements on a page, like all TD elements of a table that has hundreds of rows, then the second option will be slower because jquery is listening to 1000 events at the same time, but the first option only listens to one event and that is the click of the body. Please take a look at benefits of Delegated events in .on() documentation here: http://api.jquery.com/on/

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:

answered Apr 22, 2015 at 20:35

Aram

5,7572 gold badges33 silver badges44 bronze badges

1 Comment

j08691 Over a year ago

I'm not advocating not using delegated event syntax. I'm saying that you should select an element closer to the element than document when possible.

Collectives™ on Stack Overflow

performance difference using jQuery's on() function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related