***先告诉大家页面是自上而下按顺序加载的 link->js->body
<!doctype html>
<html>
<meta charset="utf-8">
<title>页面内容执行顺序</title>
<script >
function show(){
alert(1);
};
var oBtn=document.getElementById('btn');
oBtn.onclick=show;//千万别加括号，加了括号它会先调用函数
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
</body>
</html>
页面中的js脚本在head中，js脚本要读取的input的在body中。浏览器对html页面的加载是按顺序加载的，也就在html中上面的先加载，因此当加载到js脚本时，input还没有加载到浏览器页面中。js是一种解释性的脚本，也是从上而下顺序执行，由于这段js代码是立即执行的，所以当js在执行的时候，所以读取不到input。
最直接的方法是把js放到网页的最下面执行。
<!doctype html>
<html>
<meta charset="utf-8">
<title>页面内容执行顺序</title>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<script>
function show(){
alert(1)
};
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
show();
};
</script>
</body>
</html>
把js放到网页最下面，这样js在执行的时候网页内容都已加载完毕。把js放到网页下面加载并不是最好的解决方法，大部分情况js并不是总能放在网页的最下面，这时候可以用window 的onload事件，onload事件在整个页面加载完之后才触发，可以把js脚本放在onload里面执行。
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页内容执行的顺序</title>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
alert(1);
};
};
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
</body>
</html>
上面方法本质是添加onload监听事件
网友评论