Home > Developer > JavaScript
JQuery $ (document). ready () and JavaScript onload events, jquery. ready
To bind element operations and events, you need to wait for a proper time. See the following example:
<! DOCTYPE html> <meta charset = "UTF-8">In this case, the event is bound before the element is loaded,
The browser Console reports the following error: TypeError: document. getElementById (...) is null to change the time. The following three programs can successfully bind events. After you click an element, the corresponding alert () will pop up (). The first is to bind the event to the body. After the element:<! DOCTYPE html> <meta charset = "UTF-8">The second is to bind the event in window. onload:
<! DOCTYPE html> <meta charset = "UTF-8">The third method is jQuery's ready () method.:
<! DOCTYPE html> <meta charset = "UTF-8"> JQuery $ (document). ready () and window. onloadAccordingReady ()API description of the method: http://api.jquery.com/ready /.
This method receives a function-type parameter ready (handler). the function of this method is Specify a function to execute when the DOM is fully loaded.
That is, when the DOM is loaded, execute the specified method.Because only after the document status is ready, page operations are safe. $ (document ). ready () is executed only once when the DOM is ready. in comparison, the load event will wait until the page rendering is complete, that is, when all resources (slice) are fully loaded. $ (Window). load (function (){...}) It will wait for the entire page, not just DOM, but also images and iframes to be ready before execution.Ready () is executed after the DOM is ready, that is, when the DOM tree is established. therefore, ready () is a better time. if you call the ready () method after DOM initialization, the new handler will Run now. Note: The ready () method is called multiple times. The passed handler method will be executed in series (appended ). In JavaScript, window. onload is a method for assigning values, that is, the latter will overwrite the former.$ (Document). ready ()$( document ).ready( handler ) $().ready( handler ) (this is not recommended) $( handler )The window object and document object the Window object represents the window opened in the browser: The http://www.w3school.com.cn/jsref/dom_obj_window.asp Document Object represents the HTML document loaded into the browser: The http://www.w3school.com.cn/jsref/dom_obj_document.asp Event object Event is the Event, representing a variety of States: the http://www.w3school.com.cn/jsref/dom_obj_event.asp event handle allows us to attach some operations and processing when an event occurs, such as what operations are performed when a button click event occurs. the reference link above contains a list of attributes that correspond to various events and can be used to define event behavior. the onload mentioned in this article is one of the events. onload event: the http://www.w3school.com.cn/jsref/event_onload.asp onload event occurs immediately after loading is complete. (Note that l is in lower case ). tags that support this event are: <body>, <frame>, <frameset>, <iframe>, , <link>, <script> the JavaScript objects supporting this event are: image, layer, and window. note that there is no document. Onload usage ParsingThe most common one is window. onload, which will wait until the entire page and various resources are loaded and then execute the function Action assigned after the assignment. In addition, you can use onload In the tag, for example:<body onload="inlineBodyOnloadTimeCounter();">InlineBodyOnloadTimeCounter () is a custom JavaScript function. Note that the jQuery ready () API document contains the following section:The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.The ready () method is incompatible with <body onload = "">.
Note: The article is reprinted.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
