浏览器在加载一个页面时,是按照自上向下的顺序加载
读取到一行就执行一行,如果script标签写在页面的上边,
在代码执行时,页面还没有加载
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS中文档的加载</title>
<script>
/*
onload事件会在整个页面加载完成之后才会触发
为window对象绑定onload事件
当onload事件触发时,将执行对应的响应处理函数
*/
window.onload=function(){
debugger;
var btn=document.getElementById('clickBtn');
btn.onclick=function(){
alert("Button Click Event!");
}
}
</script>
</head>
<body>
<button id="clickBtn">点我一下吧</button>
<!-- 这种方式也可以,性能相对比较好一些,当静态页面加载完之后
再执行JS代码
-->
<!-- <script>
// debugger;
var btn=document.getElementById('clickBtn');
btn.onclick=function(){
alert("Button Click Event!");
}
</script> -->
</body>
</html>