Js放到HTML文件中的哪個(gè)位置有什么區(qū)別

2019-11-20 22:22:52

字體：大中小

供稿：網(wǎng)友

這個(gè)問題一直是初學(xué)者的困惑。先明白js能放在HTML的那個(gè)位置，分別是head和body中。大部分人都是放到head里面的。我學(xué)的時(shí)候也是稀里糊涂的跟著放到head的里面，也不知道為什么？今天看說說，放到這兩個(gè)地方的區(qū)別:
先看一段html代碼:

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="test.js"></script> 

</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn">按鈕</button> 

</body> 
</html> 

復(fù)制代碼代碼如下:

 
var test = function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
} 

document.getElementById("btn").onclick=test; 

如果這段代碼放到head里面就不能運(yùn)行。為什么？
這就要說一下HTML的運(yùn)行順序了，應(yīng)該確切點(diǎn)說不是HTML的運(yùn)行順序，是js的運(yùn)行順序。HTML從上運(yùn)行到<script type="text/html" src="test.js"></script>的時(shí)候進(jìn)入test.js文件。前面的不會(huì)運(yùn)行，也就是被function包起來的不會(huì)被運(yùn)行，這個(gè)時(shí)候就執(zhí)行最后一句。去頁(yè)面中取元素Id為btn的元素。但是這個(gè)時(shí)候，HTML頁(yè)面并沒有加載完。肯定取不到id為btn的元素。會(huì)報(bào)錯(cuò)。這個(gè)時(shí)候有人說可以改為下面的代碼:

復(fù)制代碼代碼如下:

 
document.body.onload = function(){ 
document.getElementById("btn").onclick=test; 
}; 

但是這樣寫還不如，寫到</body>的前面呢。
有沒有注意到，上面的[document.getElementById("btn").onclick=test;]中test沒有括號(hào)，那如果改成[test()].會(huì)怎么樣呢

結(jié)果如圖，頁(yè)面載入就是是這個(gè)樣子，點(diǎn)擊按鈕沒有反應(yīng)。將js代碼改成如下:

復(fù)制代碼代碼如下:

 
var test=function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
return function(){ 
alert("aaaa"); 
}; 
} 

document.getElementById("btn").onclick=test(); 

頁(yè)面載入的時(shí)候，還是和上面一個(gè)樣子，當(dāng)點(diǎn)擊按鈕的時(shí)候，有反應(yīng)了彈出一個(gè)框內(nèi)容是”aaaa“;說明點(diǎn)擊的時(shí)候執(zhí)行了函數(shù)中return的值。也就是加括號(hào)的時(shí)候，不觸發(fā)事件也會(huì)執(zhí)行函數(shù)。觸發(fā)事件的時(shí)候執(zhí)行函數(shù)的返回值。不加括號(hào)的時(shí)候，觸發(fā)事件才執(zhí)行函數(shù)。

html的事件觸發(fā)器，內(nèi)容能寫什么？
•比如onclick="";雙引號(hào)里面能寫什么。一般看到的可以寫函數(shù)，比如，onclick="test();"。除了這個(gè)還能寫什么呢?好有這個(gè)分號(hào)能不寫嗎?
•看上面的js代碼，每一行都有分號(hào)。分號(hào)的作用就是為了語(yǔ)句被混淆。那也就是說onclick里面可以寫js代碼。寫一個(gè)試試，如下

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 


</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn" onclick="var espan = document.createElement('span');espan.innerHTML='添加';document.getElementById('target').appendChild(espan);">按鈕</button> 

</body> 
</html> 

•運(yùn)行結(jié)果如下：

•說明是可以運(yùn)行的。這說明，不止可以放函數(shù)名了。

事件綁定方式？
•事件綁定方式常用有兩種一是前面介紹的在事件中加入js代碼。如：onclick="test();"。這種綁定方式有缺點(diǎn)，就是你要修改，美工已經(jīng)寫好的代碼。
•還有一種方式就是我開始代碼寫的那樣，通過id，只需要美工將每個(gè)元素都加上id就行。并不需要修改HTML代碼。

上一篇：獲取表單控件原始(初始)值的方法

下一篇：使用jQuery避免鼠標(biāo)雙擊的解決方案