页面加载的顺序和window.onload的作用

来源：互联网发布：淘宝菲戈体育正吗编辑：程序博客网时间：2024/06/11 18:11

在说我们的主题之前，我们首先来看几段代码：

例子一、首先我们把script代码块放在head标签内，运行之后发现，点击按钮没有反应。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>test1</title>    <script>        var btn = document.getElementById("button");        btn.onclick =function(){            alert("你点击了按钮哦！");        }    </script></head><body><input  id="button" type="button" value="点击" ></body></html>

例子二、将代码块放在body标签的尾部，点击按钮有响应，有弹出框提示“你点击了按钮哦！”

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>test1</title></head><body><input  id="button" type="button" value="点击" ><script>    var btn = document.getElementById("button");    btn.onclick =function(){        alert("你点击了按钮哦！");    }</script></body></html>

例子三、将script代码块放在head标签内，用window.onload来触发事件，点击按钮有响应，有弹出框提示“你点击了按钮哦！”。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>test1</title>    <script>        window.onload = function(){            var btn = document.getElementById("button");            btn.onclick =function(){                alert("你点击了按钮哦！");            }        }    </script></head><body><input  id="button" type="button" value="点击" ></body></html>

造成上面的这三种情况是什么原因呢？现在进入我们研究的主题：页面加载的顺序和window.onload的作用。

当javascript脚本引入的是js文件的时候，是如何执行的呢？

我之前写过一篇博文，可以参考一下：关于脚本放的位置以及加载方式。

当javascript脚本里面是代码的时候，往往需要在文档加载完成后才能够去能够去执行，否则导致无法获取到对象的情况，就像上面的例子一一样。

如果想要解决这个问题，有两个方法，分别是上面代码中的例子二和例子三。

对于例子三的window.onload，它是一个事件，当文档加载完成之后会触发该事件，可以为此事件注册事件处理函数，并将要执行的极爱本代码放在事件处理函数中，于是就可以避免事件获取不到的情况。

事件处理函数的绑定有几个方法：

1、就像上面的例子三一样，window.onload = function(){}来绑定匿名函数来进行事件处理；

2、window.onload来绑定非匿名函数来进行事件处理；

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>test1</title>    <script>        window.onload = function MyLoad(){            var btn = document.getElementById("button");            btn.onclick =function(){                alert("你点击了按钮哦！");            }        }            </script></head><body><input  id="button" type="button" value="点击" ></body></html>

注意：window.onload不能绑定多个事件处理函数，详情解释可以查阅windows.onload()与$(document).ready()的区别

3、要想同时绑定多个事件，可以使用addEventListener和attachEvent方法。

window.addEventListener("type",函数名,false);

window.attachEvent("type",函数名)；

具体使用代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>测试</title>    <script type="text/javascript">         window.addEventListener("load",changeColor,false);         window.addEventListener("load",changeWidth,false);        function changeColor(){            document.getElementById("divTest").style.backgroundColor ="red";        }         function changeWidth(){             document.getElementById("divTest").style.width ="100px";         }    </script></head><body><div id="divTest" style="height: 50px;width: 50px; background-color: blue"></div></body></html>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>测试</title>    <script type="text/javascript">         window.attachEvent("onload",changeColor);         window.attachEvent("onload",changeWidth);        function changeColor(){            document.getElementById("divTest").style.backgroundColor ="red";        }         function changeWidth(){             document.getElementById("divTest").style.width ="100px";         }    </script></head><body><div id="divTest" style="height: 50px;width: 50px; background-color: blue"></div></body></html>

注意：1、addEventListener 不适用于IE 8和IE 8以下的的浏览器，适用于其他主流浏览器。
而attachEvent适用于IE 8和IE 8以下的的浏览器
2、addEventListener方法的type参数，不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。
而attachEvent方法的type参数是要使用“on” 前缀的，例如，使用“onload”，而不是使用“load”。

所以一般可以将addEventListener 方法和attachEvent方法共同使用，来判断浏览器版本，再确定是使用哪种方法来绑定事件。

var x = document.getElementById("myBtn");if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本    x.addEventListener("click", myFunction);} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本    x.attachEvent("onclick", myFunction);}

参考链接：http://www.softwhy.com/forum.php?mod=viewthread&tid=6191

0 0