在说我们的主题之前，我们首先来看几段代码：
例子一、首先我们把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不能绑定多个事件处理函数
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);
}