Js放到HTML檔案中的哪個位置有什麼差別_javascript技巧

這個問題一直是初學者的困惑。先明白js能放在HTML的那個位置，分別是head和body。大部分人都是放到head裡面的。我學的時候也是稀裡糊塗的跟著放到head的裡面，也不知道為什麼？今天看說說，放到這兩個地方的差別:
先看一段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從上運行到的時候進入test.js檔案。前面的不會運行，也就是被function包起來的不會被運行，這個時候就執行最後一句。去頁面中取元素Id為btn的元素。但這個時候，HTML頁面並沒有載入完。肯定取不到id為btn的元素。會報錯。這時候有人說可以改成下面的程式碼:

複製程式碼

程式碼如下:

document .body.onload = function(){ document.getElementById("btn").onclick=test; }; 但是這樣寫不如，寫到的前面呢。

有沒有註意到，上面的[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程式碼。寫一個試試，如下 複製程式碼 程式碼如下:

按鈕 button>

•運作結果如下：
 
•說明是可以運作的。這說明，不只可以放函數名了。

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