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?

Answer 1

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).

Answer 2

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/