Question

The document.ready is used to execute code after the DOM is fully loaded. This can be used to attach event handlers to elements on the page e.g

$(function(){ 
    $('#somediv').click(function(){ 

    }); 
}) 

<div id="somediv"> </div> 

Internally, jQuery hooks up to DOMContentLoaded and window.onload as a fallback. In IE’s case an attempt is made to scroll the viewport over and over until successful.

I have a few questions, my first one being, when binding event handlers to the document itself, is it necessary to put that code in a document.ready ? I have always been writing the code below without wrapping it in a document.ready

$(document).keydown(function(e){
    if (e.which == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
});

And as you can see, it works. My understanding is, since this code doesn’t hook up to any elements within the document, but the document itself, there’s no need to wrap it in a document.ready handler. Another reason i don’t wrap it is because i used to do the same in vanilla javascript the equivalent would be the code below, which also works.

document.onkeydown = function(){
var keyCode = event.keyCode || event.which;   
    if (keyCode == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
}

I’ve seen numerous posts where people wrap it in a document.ready, is there any downside of not wrapping this code in document.ready ?

Also i think this question stems from my lack of clarity of what happens during this time when the DOM is being constructed, so if someone can explain what happens during the period right before the DOM is ready. To me the document is ready when the html has been parsed and converted into a DOM tree, or is there more to it ?

In summary, here are my questions

1. When binding event handlers to the document itself, is it
   necessary to put that code in a document.ready.
2. Are there any downsides to not wrapping the code in the document.ready ?
3. What sequence of events take place when the document is being constructed, right before the document.ready is fired ?

Answer 1

If you are binding to the document itself, you don’t need to wait until it is ready. There shouldn’t be any downsides to not wrapping it in document.ready in this case.

document.ready gets fired when the DOMReady event is triggered by the browser, or when a specific test is successful for versions of browsers that don’t support the DOMReady event.

Additional information. (5/22/12)

Most modern browsers implement the DOMContentLoaded event which fires when all elements defined on the document are ready to be manipulated by javascript. Other browsers either rely on a setTimeout loop that continuously checks the readystate of the document or binds directly to the onreadystatechanged method of the document (taken from jquery core). The document itself is ready to be manipulated before javascript is ever executed, therefore you never need to wait when binding directly to the document.

The only gotcha here is that if the code interacts with elements other than the document, there is a chance that the event could be triggered on the document before those elements exist. It is very unlikely for that to happen, but it can happen. If that is something that can happen with your code, then it makes sense to place it inside of $(document).ready() to prevent that scenario. Your sample doesn’t warrant being placed inside of $(document).ready().