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.