JavaScript从入门到精通系列第三十七篇：详解JavaScript中文档的加载顺序

文章目录

一：文档加载说明

1：回顾一个代码

2：问题分析和说明

二：如何给JS换个位置？

1：过程分析

2：代码编写

3：运行结果

4：解释说明

---

大神链接：作者有幸结识技术大神孙哥为好友，获益匪浅。现在把孙哥视频分享给大家。

孙哥链接：孙哥个人主页
作者简介：一个颜值99分，只比孙哥差一点的程序员
本专栏简介：话不多说，让我们一起干翻JavaScript

本文章简介：话不多说，让我们讲清楚JavaScript的事件和事件响应

一：文档加载说明

1：回顾一个代码

	
		
		
		
	
	
		这是一个按钮
	

        这个代码运行会报错滴，是运行不过去滴。大家可以试试。 

2：问题分析和说明

        我们这样写代码是有问题的，代码真正运行的时候也会报错。这个原因呢是因为我们的js代码跑到了title里边。

        浏览器在加载一个页面的时候是按照自上而下的顺序加载。读取到一行就运行一行代码。所以， 我们的按钮定义在后，js代码执行再前，这不就有大问题了么。所以，真正的问题是在这里。

        所以，将js代码编写到我们页面的下边就是为了页面加载完毕之后，在执行js代码。

二：如何给JS换个位置？

1：过程分析

        我们可以把js代码写到title的位置，只需要把这些定义的内容放到整个页面加载完毕这个监听事件中去即可。

        我们现在需要找到这个事件，为这个时间找到绑定函数。这个事件就是onload：一张页面或者一个图像加载完成。

        这个时间绑定给哪个对象呀？这个对象可定是window对象。所以，接下来我们给window绑定一个onload事件绑定一个事件函数。

2：代码编写

	
		
		
		
	
	
		这是一个按钮

	

3：运行结果

4：解释说明

        window.onload这个监听事件，我们往上绑定的事件函数会在整个页面加载加载完毕之后完成。我们有任何想要页面加载完毕之后再做的操作都可以丢到这里边去。 

        在代码执行的之后，页面还没有加载，页面还没加载的时候，我们的Dom对象也没有加载。解决方式要么就是将JS代码写到最后，要么就是把JS代码写到window.onload里边。