一、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>