JS中window.onload事件详解

pseudonym_

52274人浏览 · 2017-05-21 21:32:48

pseudonym_ · 2017-05-21 21:32:48 发布

window.onload出现的原因？
我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。
window.onload是什么？
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};
发生要对对象进行，而对象还未被加载，导致相当于无操作的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

结果：操作对象被未加载的结果

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>