93-----JS基础-----文档的加载

最新推荐文章于 2022-07-15 16:33:27 发布

Mango酱

最新推荐文章于 2022-07-15 16:33:27 发布

阅读量76

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_44517656/article/details/121429145

版权

JavaScript学习笔记专栏收录该内容

121 篇文章 1 订阅

订阅专栏

一代码

文档的加载就是我们可以指定一些代码，通过绑定事件回调函数，在文档加载完页面后，再执行这些代码。

很简单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 2. 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边，
			 * 	在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
			
			
			
			/*
			 * 3. onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 1. 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>

Mango酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
93-----JS基础-----文档的加载

一代码文档的加载就是我们可以指定一些代码，通过绑定事件回调函数，在文档加载完页面后，再执行这些代码。很简单。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 2. 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
复制链接

扫一扫