欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript——HTML代码执行顺序

程序员文章站 2022-07-15 15:47:43
...

一、HTML代码执行顺序

JavaScript——HTML代码执行顺序

二、从执行顺序解释window.onload()事件

window.onload()事件作用

  • onload事件会在整个页面加载完成之后才触发
  • 确保代码执行时所有的DOM对象已经加载完毕

看具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		  
			   // 获取id为btn的按钮
			   var btn=document.getElementById("btn");
			   //为按钮绑定一个单击响应函数
			   btn.onclick=function(){
			   	alert("hello");
			  
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
	</body>
</html>

此代码要功能是实现点击页面中button弹窗"hello"
不过，运行到
var btn=document.getElementById(“btn”);

出现bug因为button按钮还没有执行,即还没有按钮，所以无法获取button对象

解决的办法：
将实现功能的代码放入到window.onload()事件中，此时，等全部文档执行完成后，才会触发window.onload()事件

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		  
		   window.onload=function(){
					   // 获取id为btn的按钮
					   var btn=document.getElementById("btn");
					   //为按钮绑定一个单击响应函数
					   btn.onclick=function(){
						alert("hello");
					   }
				   }
			  
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
	</body>
</html>
相关标签： JavaScript

上一篇： (转)当使用Pagehelper进行分页时页数不在实际页数之内依旧有数据返回

下一篇： CVE-2018-8581复现

推荐阅读