Js放到HTML文件中的哪個位置有什麼區別
編輯：關於JavaScript
這個問題一直是初學者的困惑。先明白js能放在HTML的那個位置，分別是head和body中。大部分人都是放到head裡面的。我學的時候也是稀裡糊塗的跟著放到head的裡面，也不知道為什麼？今天看說說，放到這兩個地方的區別:
先看一段html代碼:
復制代碼 代碼如下:
<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>
復制代碼 代碼如下:
var test = function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
}
document.getElementById("btn").onclick=test;
如果這段代碼放到head裡面就不能運行。為什麼？
這就要說一下HTML的運行順序了，應該確切點說不是HTML的運行順序，是js的運行順序。HTML從上運行到<script type="text/html" src="test.js"></script>的時候進入test.js文件。前面的不會運行，也就是被function包起來的不會被運行，這個時候就執行最後一句。去頁面中取元素Id為btn的元素。但是這個時候，HTML頁面並沒有加載完。肯定取不到id為btn的元素。會報錯。這個時候有人說可以改為下面的代碼:
復制代碼 代碼如下:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};
但是這樣寫還不如，寫到</body>的前面呢。
有沒有注意到，上面的[document.getElementById("btn").onclick=test;]中test沒有括號，那如果改成[test()].會怎麼樣呢
結果如圖，頁面載入就是是這個樣子，點擊按鈕沒有反應。將js代碼改成如下:
復制代碼 代碼如下:
var test=function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
return function(){
alert("aaaa");
};
}
document.getElementById("btn").onclick=test();
頁面載入的時候，還是和上面一個樣子，當點擊按鈕的時候，有反應了彈出一個框內容是”aaaa“;說明點擊的時候執行了函數中return的值。也就是加括號的時候，不觸發事件也會執行函數。觸發事件的時候執行函數的返回值。不加括號的時候，觸發事件才執行函數。
html的事件觸發器，內容能寫什麼？
•比如onclick="";雙引號裡面能寫什麼。一般看到的可以寫函數，比如，onclick="test();"。除了這個還能寫什麼呢?好有這個分號能不寫嗎?
•看上面的js代碼，每一行都有分號。分號的作用就是為了語句被混淆。那也就是說onclick裡面可以寫js代碼。寫一個試試，如下
復制代碼 代碼如下:
<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>
•運行結果如下：
•說明是可以運行的。這說明，不止可以放函數名了。
事件綁定方式？
•事件綁定方式常用有兩種一是前面介紹的在事件中加入js代碼。如：onclick="test();"。這種綁定方式有缺點，就是你要修改，美工已經寫好的代碼。
•還有一種方式就是我開始代碼寫的那樣，通過id，只需要美工將每個元素都加上id就行。並不需要修改HTML代碼。
先看一段html代碼:
復制代碼 代碼如下:
<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>
復制代碼 代碼如下:
var test = function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
}
document.getElementById("btn").onclick=test;
如果這段代碼放到head裡面就不能運行。為什麼？
這就要說一下HTML的運行順序了，應該確切點說不是HTML的運行順序，是js的運行順序。HTML從上運行到<script type="text/html" src="test.js"></script>的時候進入test.js文件。前面的不會運行，也就是被function包起來的不會被運行，這個時候就執行最後一句。去頁面中取元素Id為btn的元素。但是這個時候，HTML頁面並沒有加載完。肯定取不到id為btn的元素。會報錯。這個時候有人說可以改為下面的代碼:
復制代碼 代碼如下:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};
但是這樣寫還不如，寫到</body>的前面呢。
有沒有注意到，上面的[document.getElementById("btn").onclick=test;]中test沒有括號，那如果改成[test()].會怎麼樣呢
結果如圖，頁面載入就是是這個樣子，點擊按鈕沒有反應。將js代碼改成如下:
復制代碼 代碼如下:
var test=function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
return function(){
alert("aaaa");
};
}
document.getElementById("btn").onclick=test();
頁面載入的時候，還是和上面一個樣子，當點擊按鈕的時候，有反應了彈出一個框內容是”aaaa“;說明點擊的時候執行了函數中return的值。也就是加括號的時候，不觸發事件也會執行函數。觸發事件的時候執行函數的返回值。不加括號的時候，觸發事件才執行函數。
html的事件觸發器，內容能寫什麼？
•比如onclick="";雙引號裡面能寫什麼。一般看到的可以寫函數，比如，onclick="test();"。除了這個還能寫什麼呢?好有這個分號能不寫嗎?
•看上面的js代碼，每一行都有分號。分號的作用就是為了語句被混淆。那也就是說onclick裡面可以寫js代碼。寫一個試試，如下
復制代碼 代碼如下:
<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>
•運行結果如下：
•說明是可以運行的。這說明，不止可以放函數名了。
事件綁定方式？
•事件綁定方式常用有兩種一是前面介紹的在事件中加入js代碼。如：onclick="test();"。這種綁定方式有缺點，就是你要修改，美工已經寫好的代碼。
•還有一種方式就是我開始代碼寫的那樣，通過id，只需要美工將每個元素都加上id就行。並不需要修改HTML代碼。
- 上一頁:獲取表單控件原始(初始)值的方法
- 下一頁:Table凍結表頭示例代碼
小編推薦
熱門推薦