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

news2025/1/24 11:37:28

文章目录

一：文档加载说明

1：回顾一个代码

2：问题分析和说明

二：如何给JS换个位置？

1：过程分析

2：代码编写

3：运行结果

4：解释说明

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

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

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

一：文档加载说明

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>