JS中window.onload事件详解

  1. window.onload出现的原因?
     我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了,我们不得不把js代码放在页面的底端。但是我们在设计页面的时候,为了把js代码放在一起,或者一个让页面更加简洁的位置,那就有可能出现代码中操作的对象未被加载的情况,那么我们该如何去解决呢?这时候window.onload就被有了存在的意义了。

  2. window.onload是什么?
     window.onload是一个事件,在文档加载完成后能立即触发,并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即:window.onload =function (){这里写操作的代码};

  3. 发生要对对象进行,而对象还未被加载,导致相当于无操作的实例:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>操作对象未被加载title>
<script type="text/javascript">
    document.getElementById("s").style.color="green";
script>
head>
<body>

    <span id="s">要坚强,当然是选择原谅他啊!!!span>

body>
html>

 
结果:JS中window.onload事件详解_第1张图片
 

  1. 使用window.onload()方法处理的情况的实例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用window.onload(),操作对象 已被加载title>
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("s").style.color="green";
    };
script>
head>
<body>

    <span id="s">要坚强,当然是选择原谅他啊!!!span>

body>
html>

 
使用window.onload()方法事件的结果:
JS中window.onload事件详解_第2张图片

你可能感兴趣的:(JavaScript)