Are there any drawbacks to listen events on document level in jQuery?

Question

To listen events on elements, I think to listen on document level:

$(document).on('click', '.myclass', function() {/*do something*/});

is better than the style to listen on element level:

$('.myclass').on('click', function() { /*do something*/ });

The reason is the first style could apply to dynamically added new elements as well. You can also see this style used a lot in Bootstrap: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

I would like to use the first style extensively. But I wonder if there are any drawbacks of this style, say performance?

The second applies to dynamically-added elements as well, but only those within the `.myclass` element(s). — David says reinstate Monica, May 05 '13 at 10:49
@roasted: [no, seems to work for dynamically-added elements too](http://jsfiddle.net/davidThomas/VeyNS/), so long as they're *within* the `.myclass` element. — David says reinstate Monica, May 05 '13 at 10:56
You might want to read http://stackoverflow.com/a/1688293/218196, although that mostly lists the benefits. — Felix Kling, May 05 '13 at 10:57
@DavidThomas You are correct, i misinterpreted your statement — A. Wolff, May 05 '13 at 10:57
@DavidThomas, if a new `.myclass` add into DOM, it seems cant' be fired. I meant this kind of problem before so I would like to switch. — Billy Chan, May 05 '13 at 11:02
@Billy: indeed, but you didn't specify which elements you were adding, and I chose not to guess. — David says reinstate Monica, May 05 '13 at 11:06

score 17 · Accepted Answer · edited Nov 19 '20 at 14:07

From the jQuery documentation available here:

Event performance

In most cases, an event such as click occurs infrequently and performance is not a significant concern. However, high frequency events such as mousemove or scroll can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using setTimeout.

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.

jQuery can process simple selectors of the form tag#id.class very quickly when they are used to filter delegated events. So, "#myForm", "a.external", and "button" are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of $("body").on("click", "#commentForm .addNew", addComment) use $("#commentForm").on("click", ".addNew", addComment).

score 2 · Answer 2 · answered May 05 '13 at 10:53

If .myclass is added dynamically in your document, this is what you prefer

$(document).on('click', '.myclass', function() {/*do something*/});

To make it more efficient, consider this - (As you would like to use the first style extensively)

<div class='parentClass'>
   <div class='myclass'></div>  // <-- added dynamically
</div>

You can do this -

$('.parentClass').on('click', '.myclass', function() {/*do something*/});

See Api Docs - http://api.jquery.com/on/

score 1 · Answer 3 · answered Oct 17 '14 at 12:03

Another advantage of attaching a click handler directly on the element itself, is that Android seems to like that a lot better. When touching an element that has a click handler, the mobile browser will give a slight hint that something has been activated which it doesn't do when the handler is attached to another element.

It also seems to work a lot more stable.

Are there any drawbacks to listen events on document level in jQuery?

3 Answers3

Event performance

Linked

Related