jQuery event handling - bind to document or 'body' element?

Question

I have noticed the use of $(document) and $('body') when we want to reference the entire page, especially when binding events.

$(document).on('click', '.myElement', function);

and

$('body').on('click', '.myElement', function);

What is the difference performance-wise? If $(document) binds the event to the entire HTML document, why do we not use $('body') to bind events like click instead?

Note that this question is not referring to the use of the ready function, but the use of .on() or .delegate() binding.

http://stackoverflow.com/questions/12307112/difference-between-document-body-and-body-jquery — TGH, Apr 16 '13 at 05:22
They are different elements. It doesn't really matter which one you target — John Dvorak, Apr 16 '13 at 05:24
`document` doesn't contain any other clickable elements than `document.body`. Unless the user clicks where `body` isn't, every click to `document` is a click to `body`. — John Dvorak, Apr 16 '13 at 05:41

score 32 · Accepted Answer · answered Aug 19 '15 at 17:20

What is the difference performance-wise?

Almost certainly none, or more accurately, nothing measurable. $('body') in theory has to search the DOM for the body element, but that's going to be very fast. Also, since body is a child of document, it will be reached in the bubbling of the event nanoseconds before document is.

There are a couple of differences, though:

If you used $('body') in a script in the head and didn't delay execution of it (ready, etc.), $('body') wouldn't find anything and wouldn't hook up any handlers. $(document), on the other hand, would.

If the body of the document doesn't fill the viewport, then on at least some browsers, you'll get a click on document but not on body:

$(document).on("click", function() {
  $("<p>document</p>").appendTo(document.body);
});
$('body').on("click", function() {
  $("<p>body</p>").appendTo(document.body);
});

body {
  border-bottom: 1px solid #060;
}

<p>The line marks the bottom of <code>body</code>. Click above and below the line to see where the click was caught. (Note the line will move as we append to <code>body</code>.)</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Of course, that doesn't apply to your $('body').on('click', '.myElement', function); because if the click is outside body, it's not going to pass through a .myElement...

For global handlers, I use $(document), never $('body') (or $(document.body)), but that may well be more from habit than reason.

score 3 · Answer 2 · answered Apr 16 '13 at 05:24

$('body') targets the <body> html element, while $(document) targets the entire html document. That means if you want to reference something in the <head> element you'll want to get there from $(document) because that's a direct path.

For your purposes, based on what you've shown us, they should be equivalent.

Cory Danielson · Answer 3 · 2016-05-19T15:49:44.300

2

Body is a child of document. Because of this, events will first reach the body before they are bubbled up to the document.
example: http://jsfiddle.net/CoryDanielson/JhH9V/

edited May 19 '16 at 15:49

answered Apr 16 '13 at 05:39

Cory Danielson

14,314
3
44
51

score 1 · Answer 4 · answered Apr 16 '13 at 05:26

It is definitely not the same because though when working with jQuery/JavaScript you are able to do your work done with both of them but however you cannot style document via css. Your body can have a specified height. Try adding a height of 200px to your body and a background-color of your choice (So, you can see the difference). Then add bindings to both the document and the body (different actions for both the events).

This experiment might work out for you.

Imtiaz Zaman Nishith · Answer 5 · 2013-04-16T05:40:31.650

1

'document' keyword is just a handle on the object that contains the whole HTML Document. On the other hand In jQuery, $('body') contains the body portion the HTML document. But in reality, you won't notice a difference of behavior between them.

For any further information about several jQuery functions and their working procedure, visit: jQuery function

edited Apr 16 '13 at 05:40

answered Apr 16 '13 at 05:33

Imtiaz Zaman Nishith

480
3
13

jQuery event handling - bind to document or 'body' element?

5 Answers5

Linked