Window. onload User Guide, window. onload

Window. onload User Guide, window. onload

Javascript script code on a webpage can be executed only after the document is loaded. Otherwise, the object cannot be obtained. To avoid this, you can use the following two methods:

1. Place the script code at the low end of the Web page. when running the script code, you can ensure that the object to be operated has been loaded.
2. Run the script code through window. onload.

The first method is messy (recommended in fact). We often need to place the script code in a more appropriate place, so the window. onload method is a better choice. Window. onload is an event that is triggered after the document is loaded. You can register the event processing function for this event and place the script code to be executed in the event processing function, therefore, you can avoid getting objects. Let's take a look at a code example:

<! DOCTYPE html> 
The original intention of the above Code is to set the background color of the div to # F90, but this effect is not implemented because the code is executed in sequence. When it is executed in document. getElementById ("# bg "). style. backgroundColor = "# F90" is not loaded into this div object, so the setting cannot be successful. The code is modified as follows:
<! DOCTYPE html> 
The reason is that the Code for setting the background color is placed in the window. in onload event processing functions, only after the file is loaded, the event processing function is executed and the script code for setting the background color is executed.

Event processing function binding:

Method 1:

Window. onload = function () {}, which is used in the above Code as window. the onload event is bound to an event handler. Here an anonymous function is bound. Of course, you can also bind a non-Anonymous function. The code example is as follows:
<! DOCTYPE html> 
The above code can bind the myalert method in the name to the window. onload event, but it cannot bind multiple event handler functions to the event in the following way:
Window. onload = function (){}
Window. onload = function B (){}
The above Code does not bind multiple event handler functions to the window. onload event, but the last one will overwrite all the previous functions. But the code can be changed:
<! DOCTYPE html> 
The code above achieves the same effect of binding multiple event handler functions.

Method 2:

You can use addEventListener () and attachEvent () to bind the event handler function to the onload event. The following describes the functions respectively:
AddEventListener () is a standard event handler function binding method. However, browsers under IE8 and IE8 do not support this method. The example is as follows:
<! DOCTYPE html> 
The above code can bind multiple event handlers to the window. onload event. A Brief Introduction to the syntax format:
AddEventListener ("type", function name, false)
The addEventListener () function has three parameters. The first parameter is the event type. Note that the event type name cannot be preceded by the on parameter, for example, window. onload event, where only load can be written, the second parameter is the name of the function to be bound, and the third parameter is generally false.
Bind the event handler using the attachEvent () function:
The IE browser before IE9 does not support the addEventListener () function, so the attachEvent () function is useful. The code example is as follows:
<! DOCTYPE html> 
The effect of the above Code is the same as that of the addEventListener () function. The syntax format is briefly described as follows:
AddEventListener ("type", function name)
This function has only two parameters. The first parameter is of the event type, but it works the same as the first parameter of addEventListener (), but the name is different, the name is preceded by "on", and the second parameter is the name of the event handler function to be bound. To be compatible with various browsers, the above code needs to be transformed. The example is as follows:
<! DOCTYPE html> 
The code above solves the compatibility issues of various browsers. In the above Code, use the following code to determine:
if(object.addEventListener){ object.addEventListener();}else{ object.attachEvent();}
Use the if statement to determine whether the object has the addEventListener attribute. if so, use the addEventListener () function. Otherwise, use the attachEvent () function.