Home > Developer > JavaScript
The manipulation of elements and the binding of events need to wait for a suitable time to see the following example:
<!DOCTYPE HTML><MetaCharSet= "Utf-8"><HTML><Head> <title>1-1</title> <Scripttype= "Text/javascript">document.getElementById ("Panel"). onclick= function() {alert ("The element has been loaded!"); } /*Execution Error*/ </Script></Head><Body><DivID= "Panel">Click Me.</Div></Body></HTML>
If so, the binding event is not waiting for the element to finish loading.
There will be an error in the browser console:TypeError:document.getElementById (...) is null Change the timing, the following three programs are able to successfully bind the event, click on the element will pop up the corresponding alert ().The first is to put the event bindings in the body, after the elements:<!DOCTYPE HTML><MetaCharSet= "Utf-8"><HTML><Head> <title>1-2</title></Head><Body><DivID= "Panel">Click Me.</Div><Scripttype= "Text/javascript">document.getElementById ("Panel"). onclick= function() {alert ("The element has been loaded!"); } /*Execute correctly*/</Script></Body></HTML>
The second is to put the event bindings in the Window.onload:
<!DOCTYPE HTML><MetaCharSet= "Utf-8"><HTML><Head> <title>1-3</title> <Scripttype= "Text/javascript">window.onload= function() {document.getElementById ("Panel"). onclick= function() {alert ("The element has been loaded!"); } } </Script></Head><Body><DivID= "Panel">Click Me.</Div></Body></HTML>
The third is the way that the Ready () method of jquery passes through the bound event :
<!DOCTYPE HTML><MetaCharSet= "Utf-8"><HTML><Head> <title>Panel</title> <Scriptsrc= "Jquery-1.11.2.js"type= "Text/javascript"></Script> <Scripttype= "Text/javascript">$ (document). Ready (function() {document.getElementById ("Panel"). onclick= function() {alert ("The element has been loaded!"); } }) </Script></Head><Body><DivID= "Panel">Click Me.</Div></Body></HTML>JQuery $ (document). Ready () and Window.onload
Follow the API description for the Ready () method http://api.jquery.com/ready/.
This method takes the parameter of a function type ready (handler), which is used by the method: Specify a function to execute when the DOM is fully loaded.
That is, the specified method is executed when the DOM has finished loading.because only the state of document is ready, the operation on the page is safe.$ (document). Ready () executes only once when the DOM is prepared. In contrast , the Load event waits until the page render finishes executing, that is, when all the resources (the slices) are fully loaded. $ (window). Load (function () {...}) Will wait for the entire page, not just the DOM, but also the images and IFRAMEs are ready and then executed. Ready () is executed after the DOM has been prepared, that is, when the DOM tree is established. So normally ready () is a better time. If the DOM initialization is complete before calling the Ready () method, the incoming new handler will be executed immediately . Note: The Ready () method is called multiple times, and the incoming handler method is executed in tandem (append). in JavaScript, Window.onload is a method of assigning a value, that is, the latter will overwrite the previous one.$ (document) three shorthand for Ready ()The Window object and the Document object Windows object represent the open in the browser: http://www.w3school.com.cn/jsref/dom_obj_window.asp The Document object represents the HTML document that is loaded into the browser: The Http://www.w3school.com.cn/jsref/dom_obj_document.asp Event object events, which represent various states:/HTTP The Www.w3school.com.cn/jsref/dom_obj_event.asp event handle allows us to attach some actions and processes when an event occurs, such as what to do when a button click event occurs. The reference link above contains a list of attributes that can be used to define the behavior of the event, corresponding to various events. The onload of interest in this article is one of the events. OnLoad event OnLoad event:http://www.w3school.com.cn/jsref/event_onload.aspThe OnLoad event occurs immediately after the load is complete. (Note that the L is lowercase). The tags supporting the event are: <body>, <frame>, <frameset>, <iframe>, , <link>, <script> The JavaScript objects that support this event are: image, layer, window. Note that there is no document here. onload usage parsingThe most common is window.onload, and will wait until the entire page and various resources are loaded and then perform the subsequent assignment function behavior. Alternatively, you can use onload in the label, such as:$ (document). Ready (Handler) $ (). Ready (Handler) ( This is not recommended) $ (handler)
where Inlinebodyonloadtimecounter () is a custom JavaScript function. Note that the API documentation for jquery ready () has one of these:<onload= "inlinebodyonloadtimecounter ();" >
with do not use. Ready () or use JQuery's. Load () method to attach load event handlers to the window or to more Specifi C items, like images.
Description The Ready () method and <body onload= "" > are incompatible.
Note: The article originates from reprint.
JQuery $ (document). Ready () and JavaScript onload event
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
