jQuery $(‘body’).on() vs $(‘document’).on()

May 6, 2013

With the new jQuery function .on() replacing .live() I’ve seen several different ways to use it. Here I take a look at the main difference between using body or document as the bound element in event delegation. If your new to event delegation it provides means of attaching events to elements not yet created with also having lower overhead when attaching events to multiple elements of the same type. For more information, and if your wondering why .live() was bad deprecated take a look at jQuery .live() vs .on() review.

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such aschange and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

Source: http://api.jquery.com/on/

Using body as the delegate

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.

HTML handle the Drag and Drop events:

$('body').on('dragover', filesDragged).on('drop', filesDropped);

Using document as the delegate

The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
By default, most events bubble up from the original event target to the document element.

It’s all about Speed!?

As you can see from this jsperf using document is faster than using body as the event delegate.

Again document is performing better but not much difference between .on() and .delegate() – the latter calls the former.

jQuery Source.

delegate: function( selector, types, data, fn ) {
                return this.on( types, selector, data, fn );
        },

Conclusion

Ask Paul Irish. But I guess it doesn’t make much difference, I tend to use body because that’s what is in the official jQuery API documentation.

Correct Usage:

For example, instead of:

$("body").on("click", "#commentForm .addNew", addComment)

Use:

$("#commentForm").on("click", ".addNew", addComment).

When should you use event delegation?

1. When you bind a common handler for more elements that needs same functionality. (Ex: table row hover)

* In the example, if you had to bind all rows using direct bind, you would end up creating n handler for n rows in that table. By using delegation method you could end up handling all those in 1 simple handler.

2. When you add dynamic contents more frequently in DOM (Ex: Add/remove rows from a table)

Why you should not use event delegation?

1. Event delegation is slower when compared to binding the event directly to element.

* It compares the target selector on every bubble it hits, the comparison will be as expensive as it is complicated.

2. No control over the event bubbling until it hits the element that it is bound to.

PS: Even for dynamic contents you don’t have to use event delegation method if you are bind the handler after the contents get inserted into DOM. (If the dynamic content be added not frequently removed/re-added)