***先告訴大家頁(yè)面是自上而下按順序加載的 link->js->body
<!doctype html>
<html>
<meta charset="utf-8">
<title>頁(yè)面內(nèi)容執(zhí)行順序</title>
?<script >
? ? ? ? ?function show(){
? ? ? ? ? ? ? ? ? ? ?alert(1);
? ? ? ?};
? ? ?var oBtn=document.getElementById('btn');
? ? ?oBtn.onclick=show;//千萬(wàn)別加括號(hào)恃疯，加了括號(hào)它會(huì)先調(diào)用函數(shù)
</script>
</head>
<body>
? ? ? <input type="button" value="點(diǎn)擊" id="btn"/>
</body>
</html>
? ? ? ? ? ? 頁(yè)面中的js腳本在head中，js腳本要讀取的input的在body中墨闲。瀏覽器對(duì)html頁(yè)面的加載是按順序加載的今妄，也就在html中上面的先加載，因此當(dāng)加載到j(luò)s腳本時(shí)鸳碧，input還沒有加載到瀏覽器頁(yè)面中盾鳞。js是一種解釋性的腳本，也是從上而下順序執(zhí)行瞻离，由于這段js代碼是立即執(zhí)行的腾仅，所以當(dāng)js在執(zhí)行的時(shí)候，所以讀取不到input套利。
最直接的方法是把js放到網(wǎng)頁(yè)的最下面執(zhí)行推励。
<!doctype html>
<html>
<meta charset="utf-8">
<title>頁(yè)面內(nèi)容執(zhí)行順序</title>
</head>
<body>
? ? ? ?<input type="button" value="點(diǎn)擊" id="btn"/>
<script>
? ? ? ?function show(){
? ? ? ? ? ? alert(1)
? ? ? ?};
? ? ? ? ? ?var oBtn=document.getElementById('btn');
? ? ? ? ? ? oBtn.onclick=function(){
? ? ? ? ? ? ? ? ? ? ? ?show();
? ? ? ? ? ?};
</script>
</body>
</html>
? ? ? ? ?把js放到網(wǎng)頁(yè)最下面鹤耍，這樣js在執(zhí)行的時(shí)候網(wǎng)頁(yè)內(nèi)容都已加載完畢。把js放到網(wǎng)頁(yè)下面加載并不是最好的解決方法验辞，大部分情況js并不是總能放在網(wǎng)頁(yè)的最下面稿黄，這時(shí)候可以用window 的onload事件，onload事件在整個(gè)頁(yè)面加載完之后才觸發(fā)跌造，可以把js腳本放在onload里面執(zhí)行杆怕。
<!doctype html>
<html>
<meta charset="utf-8">
<title>網(wǎng)頁(yè)內(nèi)容執(zhí)行的順序</title>
<script>
? ? ? ? window.onload=function(){ ? ? ? ? ?
? ? ? ? ? ? ?var oBtn=document.getElementById('btn'); ??
? ? ? ? ? ? ? oBtn.onclick=function(){
? ? ? ? ? ? ? ? ? ?alert(1);
? ? ? ? ? ? ?};
? ? ? ?};
</script>
</head>
<body>
? ? ? <input type="button" value="點(diǎn)擊" id="btn"/>
</body>
</html>
上面方法本質(zhì)是添加onload監(jiān)聽事件
