JS中代码的执行顺序问题

一般情况下,JS中的代码是按照自上而下的顺序执行的,于是便产生了这样的问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
<script type="text/javascript">
//根据id获取节点对象
//报错:Uncaught TypeError: btn is null
//此处此时就获取不到节点对象
//此时id=btn1的对象还没加载到内存中去
var btn=document.getElementById("btn1");
//给节点对象绑定事件
btn.onclick=function (){
alert("hello js");
}
</script>
<input type="button" value="测试按钮1" id="btn1">
</body>

点击”测试按钮1″时没有效果,因为根本就获取不到ID为:”btn1″的节点

解决方法:引入load事件

load :页面加载完毕(整个HTML中所有页面全部加载完毕之后发生的事件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
<script>
/*
页面加载的时候,将a函数注册给了load事件
页面加载完成之后,load事件发生了,此时执行回调函数a
回调函数执行的过程中,把b函数注册给了id="btm2"的按钮click事件
当id=btm2的节点发生了click事件之后,b函数被调用并执行
*/
//回调函数a
window.onload=function(){
//回调函数b
document.getElementById("btm2").onclick=function (){
alert("Hello JS");
}
}
</script>
<input type="button" value="测试按钮2" id="btm2">
</body>

点两下??

妙的妙的