JavaScript script code in web pages often needs to be executed after the document is loaded, otherwise it may lead to the inability to obtain the object. In order to avoid this, you can use the following two methods:
1. Place the script code at the low end of the web page, so that when running the script code, you can ensure that the object to be operated has been loaded.
2. Execute script code by.
The first method feels messy (actually recommended). Often, we need to put the script code in a more appropriate place, so the method is a better choice. It is an event, which will be triggered after the document is loaded. You can register an event handler for this event and place the script code to be executed in the event handler, so you can avoid the situation where the object cannot be obtained. Let's look at a code example:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>usage</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
("bg").="#F90";
</script>
</head>
<body>
<div ></div>
</body>
</html>
The original intention of the above code is to set the background color of the div to #F90, but this effect is not achieved. This is because the code is executed sequentially. When the sentence ("#bg").="#F90" is executed, the div object has not been loaded yet, so the setting cannot be successful. The code is modified as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Position heightdivVertical centered</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
=function(){
("bg").="#F90";
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
The reason is that the code that sets the background color is placed in the event handling function. Only when the document is loaded will the event handling function be executed, and the script code that sets the background color will be executed.
Event handler function binding:
Method 1:
=function(){}, in the above code, this method is used to bind event processing functions for event binding. Here is an anonymous function, and of course non-anonymous functions can also be bound. The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Detailed explanation of usage</title>
<script type="text/javascript">
=function myalert()
{
");
}
</script>
</head>
<body>
</body>
</html>
The above code can bind the named myalert method to an event, but it cannot bind multiple event handling functions for this event in the following way:
=function a(){}
=function b(){}
The above code cannot bind multiple event handling functions for events, but the last one will overwrite all previous functions. But the code can be modified:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>usage</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
=function(){
function a(){
("bg").="#F90";
}
function b(){
("bg").="200px";
}
a();
b();
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
The above code achieves the same effect of binding multiple event handlers.
Method 2:
You can use addEventListener() and attachEvent() to bind event handling functions for onload events. The following are the following:
addEventListener() is a current standard binding method for event handling functions, but browsers below IE8 and IE8 do not support this method, such as the following:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>usage</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
("load",bg,false);
("load",changeW,false);
function bg(){
("bg").="#F90";
}
function changeW(){
("bg").="200px";
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
The above code can bind multiple event handling functions to events. 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. It should be noted that there cannot be an on before the event type name. For example, an event can only be written as a load in this place. The second parameter is the name of the function to be bound, and the third parameter is generally false.
Use the attachEvent() function to bind the event handler:
The IE browsers before IE9 do not support the addEventListener() function, so the attachEvent() function has its place. The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>usage</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
("onload",bg);
("onload",changeW);
function bg(){
("bg").="#F90";
}
function changeW(){
("bg").="200px";
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
The effect of the above code is the same as the effect of using the addEventListener() function. Let me briefly introduce the syntax format:
addEventListener("type", function name)
This function has only two parameters. The first parameter is the event type. However, it functions the same as the first parameter of addEventListener(), but the name is different. The name is preceded by "on". The second parameter is the name of the event handler function to be bound. In order to be compatible with each browser, the above code needs to be modified, as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>usage</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
if(){
("load",bg,false);
("load",changeW,false);
}
else{
("onload",bg);
("onload",changeW);
}
function bg(){
("bg").="#F90";
}
function changeW(){
("bg").="200px";
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
The above code solves the compatibility issues of major browsers. Use the following code to make judgments in the above code:
if(){
();
}
else{
();
}
Use the if statement to determine whether the object has the addEventListener property. If this is the case, use the addEventListener() function, otherwise use the attachEvent() function