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

文章目录

一：文档加载说明

1：回顾一个代码

2：问题分析和说明

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

孙哥链接：孙哥个人主页
作者简介：一个颜值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>

3：运行结果

4：解释说明

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

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

相关阅读:
【云原生之Docker实战】使用docker部署mkdocs项目文档工具
《C Primer Plus》第6章复习题与编程练习
大数据个性化推荐，AWS终端用户解决方案
Hadoop生态圈中的Flume数据日志采集工具
淘宝/天猫获得淘宝商品详情 API 返回值说明
【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 3
pytorch 训练可视化
C语言--给定一行字符串,获取其中最长单词【图文详解】
抖店都需要什么费用？2024具体费用标准，新手必看！
重新审视对比特币的九大批评！有些已被揭穿，而有些担忧可能会发生？

原文地址：https://blog.csdn.net/Facial_Mask/article/details/134410338