StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODoes this code need to be in a document.ready?
text
Body
copied!<p>The <code>document.ready</code> 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 </p> <pre><code>$(function(){ $('#somediv').click(function(){ }); }) <div id="somediv"> </div> </code></pre> <p>Internally, jQuery hooks up to <a href="https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded" rel="nofollow noreferrer"><code>DOMContentLoaded</code></a> and <code>window.onload</code> as a fallback. <strike>In IE's case <a href="https://github.com/jquery/jquery/blob/master/src/core.js#L869" rel="nofollow noreferrer">an attempt is made to scroll the viewport over and over until successful</a></strike>. </p> <p>I have a few questions, my first one being, when binding event handlers to the <code>document</code> itself, is it necessary to put that code in a <code>document.ready</code> ? I have always been writing the code below without wrapping it in a <code>document.ready</code></p> <pre><code>$(document).keydown(function(e){ if (e.which == 39) { alert( "right arrow pressed" ); return false; } }); </code></pre> <p>And as you can see, it <a href="http://jsfiddle.net/dPBTZ/4/" rel="nofollow noreferrer">works</a>. 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 <code>document.ready</code> 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 <a href="http://jsfiddle.net/dPBTZ/5/" rel="nofollow noreferrer">works</a>. </p> <pre><code>document.onkeydown = function(){ var keyCode = event.keyCode || event.which; if (keyCode == 39) { alert( "right arrow pressed" ); return false; } } </code></pre> <p>I've seen numerous posts where people wrap it in a <code>document.ready</code>, is there any downside of not wrapping this code in <code>document.ready</code> ? </p> <p>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 <em>ready</em> when the html has been parsed and converted into a DOM tree, or is there more to it ? </p> <p>In summary, here are my questions </p> <ol> <li>When binding event handlers to the <code>document</code> itself, is it necessary to put that code in a <code>document.ready</code>.</li> <li>Are there any downsides to not wrapping the code in the <code>document.ready</code> ?</li> <li>What sequence of events take place when the document is being constructed, right before the <code>document.ready</code> is fired ? </li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload