Once you learn to handle Web page events, you can create websites that interact with site visitors and enhance their user experience. Some events, such as onLoad, occur even if you don't write code to handle them. It is also possible to handle a similar event named onReady if you add an additional script library to your HTML code. OnLoad and onReady are almost identical, but they do have one important difference.
Web Pages and Events
When a Web browser creates a Web page, it constructs the page using a hierarchical object tree called the Document Object Model. Objects in the DOM exist in a structured parent-child relationship model. The body object, for example, may have child objects such as anchors and headings. Those objects might have child text nodes that reference them. The objects and relationships that exist when a page loads depend on how you code your Web page. Events, which occur during a page's life cycle, cause various actions to occur in response to a trigger action. Clicking a button, for instance, triggers an onClick event.
OnLoad and onReady
Unless you add Ext JS to a Web page, you must use the standard onLoad event to perform a task after your page loads. The onReady function runs before the onLoad event occurs and does not wait for the browser to download all data needed to construct the page. You might wish to use onReady to create the illusion that your page loads faster; site visitors will see activity on the page as it loads. However, if a function needs to manipulate a page object, use an onLoad event handler to call that function. This insures that the object exists before your code accesses it.