When should you not use $(document).ready(function() for event handlers?

Question

I'm new to jquery and javascript and just wanted to know, why would you not want to use the .ready() function for all your event handlers?

Couldn't there be potential problems if a user sends input to a mouse event or a keyboard event before the whole page has been rendered?

Answer 1

This should never be the case, the jQuery document ready fires when the DOM has been loaded. It doesn't wait for the complete page (included images and the like) to load. It would be extremely rare that a user would be able to react in time to try and trigger something prior your code being executed. Read this: http://api.jquery.com/ready/

Specifically, the first paragraph:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

So using $(document).ready(function() { }) or the equivalent $(function() { }) is always a good practice.

EDIT: To further ensure that the user will never have trouble, make sure your scripts are all hosted alongside your site. For instance, jQuery has the option of using a CDN. CDNs are nice, but if for whatever reason the user can get to your site but not the CDN, it could leave your page in a useless state.

Answer 2

I believe you actually should use the $(document).ready() handler. The reason being is, if your HTML or DOM has not fully loaded yet, when you bind events to different elements, they may fail by virtue of not having been on the page yet.

I'm not sure who or what told you not to put event handlers in the ready function, but I'd say it's a pretty common practice.

Answer 3

There are circumstances where you don't want to or can't attach event handlers on ready because you only want to enable an event after some other event or because content and other information is being loaded via ajax. For the most part the ready function is the correct place.

Answer 4

Couldn't there be potential problems if a user sends input to a mouse event or a keyboard event before the whole page has been rendered? [this paragraph] is referring to a script NOT using .ready()

In general, if you want to refer to an element from JavaScript the element in question must have already been parsed, i.e., added to the DOM tree. This applies whether you are trying to attach an event handler (with or without jQuery), change its CSS settings, or whatever.

The .ready() handler doesn't wait for the whole page to be rendered, it waits for the page to be "ready" for JS manipulation in the sense that it has been parsed and the whole DOM tree has been constructed. At that point rendering may still be occurring, e.g., the actual content of image elements could still be only partly downloaded.

However, it is possible to start manipulating elements from JavaScript before (or without) the .ready() as long as you do so in a script block that is included after the element(s) in question in the page source, because the browser does its parsing top-to-bottom from your html source. An example:

<input type="text" id="input1">
<script>
   // following will work, because "input1" already exists
   $("#input1").change(function() { /* do something */ });

   // following will NOT work, because "input2" has not been parsed yet
   $("#input2").change(function() { /* do something */ });
</script>
<input type="text" id="input2">

So if for some reason you have some critical piece of functionality that you feel you absolutely must set up before .ready() you can do something like the above.

Note also that you don't need the .ready() function at all if you include your script at the bottom of the body, because (as with .ready()) at that point all elements will have been parsed.

Where you do need .ready() is for code in an external JS file if you can't be sure where on the page the file will be included. If it is included in the <head> section it will be executed before the rest of the document is parsed so you need to use .ready().