CODEWITHSUNDEEP
jquery
Samuel Liew
Samuel Liew

Reputation: 79032

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

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.

Upvotes: 23

Views: 26386

Answers (6)

user984003
user984003

Reputation: 29557

11 years later, but thought I'd point out that there is a difference in event propagation. All events on body will fire before events on document. This can lead to some unexpected behavior if you're not consistent in which one you use.

In the below code, if you click the child, you might expect all child click events to fire before any parent click events. The actual order is as follows:

  1. Child body event
  2. Parent body event
  3. Child document event
  4. Parent document event

https://jsfiddle.net/3ugpq1Lv/

 <div id="parent">
  <div id="child">
  Click me!
  </div>
</div>


$("body").on('click','#parent',function(e) { 
    alert("body parent");
})

$(document).on('click','#parent',function(e) { 
    alert("document parent");
})

$("body").on('click','#child',function(e) { 
    alert("body child");
})

$(document).on('click','#child',function(e) { 
    alert("document child");
})

Upvotes: 0

Cory Danielson
Cory Danielson

Reputation: 14501

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/

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074238

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.

Upvotes: 32

Imtiaz Zaman Nishith
Imtiaz Zaman Nishith

Reputation: 490

'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

Upvotes: 1

akash4eva
akash4eva

Reputation: 861

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.

Upvotes: 1

DiMono
DiMono

Reputation: 3368

$('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.

Upvotes: 3

Related Questions