文章目录
一：文档加载说明
1：回顾一个代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var btn = document.getElementById("btn");
console.log(btn);
//为按钮对应事件绑定函数。
//绑定单机事件(给对象添加属性，也就是给对象属性添加函数)
//这样做就是当事件被触发时，其对应的函数会被触发
btn.onclick = function(){
alert("妈的，你还点！");
}
</script>
</head>
<body>
<button id = "btn" >这是一个按钮</button>
</body>
</html>这个代码运行会报错滴，是运行不过去滴。大家可以试试。
2：问题分析和说明
我们这样写代码是有问题的，代码真正运行的时候也会报错。这个原因呢是因为我们的js代码跑到了title里边。
浏览器在加载一个页面的时候是按照自上而下的顺序加载。读取到一行就运行一行代码。所以， 我们的按钮定义在后，js代码执行再前，这不就有大问题了么。所以，真正的问题是在这里。
所以，将js代码编写到我们页面的下边就是为了页面加载完毕之后，在执行js代码。
二：如何给JS换个位置？
1：过程分析
我们可以把js代码写到title的位置，只需要把这些定义的内容放到整个页面加载完毕这个监听事件中去即可。
我们现在需要找到这个事件，为这个时间找到绑定函数。这个事件就是onload：一张页面或者一个图像加载完成。
这个时间绑定给哪个对象呀？这个对象可定是window对象。所以，接下来我们给window绑定一个onload事件绑定一个事件函数。
2：代码编写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
console.log(btn);
btn.onclick = function(){
alert("妈的，给老子爬！");
}
}
</script>
</head>
<body>
<button id = "btn" >这是一个按钮</button>
</body>
</html>3：运行结果
4：解释说明
window.onload这个监听事件，我们往上绑定的事件函数会在整个页面加载加载完毕之后完成。我们有任何想要页面加载完毕之后再做的操作都可以丢到这里边去。
在代码执行的之后，页面还没有加载，页面还没加载的时候，我们的Dom对象也没有加载。解决方式要么就是将JS代码写到最后，要么就是把JS代码写到window.onload里边。