Home > Developer > JavaScript
You need to wait for the right time to bind the actions and events of an element, and look at the following example:
<! DOCTYPE html> <meta charset= "Utf-8" >
If this is not waiting for the element to be loaded, an event is bound to Div#panel, and the browser console will complain: TypeError:
document.getElementById (...) is null
Change the time, the following three programs are able to successfully bind the event, click on the element will pop up the corresponding alert ().
Put the event binding in the body, after the element:
Because the binding event is after the element, you can successfully get the elements of the Div#panel and tie a fixed-point hit event Div#panel.
<! DOCTYPE html> <meta charset= "Utf-8" >
To put event bindings in Window.onload for event binding:
The handler for the Window.onload event is not executed until all elements of the page have been loaded, so it is also possible to get the element and bind the event here.
<! DOCTYPE html> <meta charset= "Utf-8" >
JQuery $ (document). Ready () and Window.onload
Http://api.jquery.com/ready/is described by the API for the Ready () method.
This method receives the parameter ready (handler) of a function type, and the method works by: Specify a function to execute time the DOM is fully loaded. That means that when the DOM finishes loading, it is executed. . Since only the state of the document is ready, the operation of the element is safe. $ (document). Ready () executes only once when the DOM is ready, but can bind ready events multiple times.
Compared to ready, the Load event waits until the page render completes, i.e., when all the resources (such as pictures) are fully loaded and completed. $ (window). Load (function () {...}) waits for the entire page, not just the DOM, but also the image and IFRAMEs are ready to execute. and ready () is executed after Dom is ready, That is, when the DOM tree is built. So usually ready () is a better time.
If the Ready () method is called after the DOM initialization completes, the incoming new handler will be executed immediately.
Note: The Ready () method is invoked multiple times, and the incoming handler method is executed in tandem (append). In JavaScript, Window.onload is the assignment of a method in which the back will cover the front.
$ (document). Three abbreviations for Ready ()
$ (document). Ready (Handler)
$ (). Ready (handler)//(this isn't recommended)
$ (handler)
Window objects and Document objects
The Window object represents the windows 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: http://www.w3school.com.cn/jsref/dom_obj_document.asp
Event Object
Event is a state of affairs that represents various states: http://www.w3school.com.cn/jsref/dom_obj_event.asp
Event handlers allow us to attach some actions and processes when the event occurs. For example, when a button click event occurs, what to do. The reference link above contains a list of attributes that can be used to define the behavior of events. The onload is one of the events.
OnLoad Event
OnLoad event: http://www.w3school.com.cn/jsref/event_onload.asp
The OnLoad event occurs immediately after the load completes. (Note that the L is lowercase).
The labels 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 resolution
The most commonly used is window.onload, which waits until the entire page and various resources are loaded and then executes the function behavior after the assignment. In addition, you can use the onload in the label, such as:
<body onload= "Inlinebodyonloadtimecounter ();" >
where Inlinebodyonloadtimecounter () is a custom JavaScript function.
Note that there is a section in the API documentation for JQuery ready ():
The. Ready () is generally incompatible with the attribute. If load must be used, either does not use. Ready () or with JQuery ' s. Load () method to attach load event handlers to the Windo W or to more specific items, like images.
Note: The Ready () method is incompatible with the <body onload= "" >.
The above is a small series to introduce a comprehensive analysis of jquery $ (document). Ready () and JavaScript onload events related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
