JavaScript第五章：分離JavaScript
實際上，負責各項任務的JavaScript函式已存入外部檔案，問題出在內嵌的事件處理函式中。
如果我們適用一個“掛鉤”，就像css機制中的class或id屬性那樣，JavaScript程式碼呼叫行為與HTML文件的結構與內容分離開。
JavaScript語言不要求事件必須在HTML中處理，我們可以在外部JavaScript檔案裡把一個事件新增到HTML文件中的某個元素上。
element.event=action;1.如何確定獲得事件的元素
①如果想把一個事件新增到某個帶有特定id屬性的元素上，用getElementById就可以解決
getElementById(id).event=action;
②如果事情涉及多個元素，就可以用getElementsByTagName或getAttribute把事件新增到有著特定屬性的一組元素上。
具體步驟：把文件中所有連結全放在一個數組中；遍歷陣列；如果某個連結的class屬性等於popup，就表示這個連結在點選時應該呼叫popUp()函式。於是，把這個連結的href屬性傳給popUp函式，取消這個連結的預設行為，不讓這個連結把訪問者帶離當前視窗。
var links=document.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ if(link[i].getAttribute("class")=="popup"){ links[i].onclick=function(){ popUp(this.getAttribute("href")); return false; } } } //以上程式碼將popUp函式的onclick事件新增到了有關的連結上。只要把它們存入到一個外部JavaScript檔案 //就等於把這些操作從HTML文件中分離出來
仍有問題要解決：程式碼的第一行語句在JavaScript檔案被載入時立刻執行。如果JavaScript檔案是從HTML文件裡的<head>部分用<script>標籤呼叫的，它將在HTML文件載入之前載入到瀏覽器。如果<script>標籤位於文件底部</body>之前，就不能保證哪個檔案先結束載入。因為指令碼載入時文件可能不完整，所以模型也不完整，getElementByTagName等方法就不能正常工作。
解決方法：必須讓這些程式碼在HTML全部載入到瀏覽器之後馬上開始執行。HTML文件全部載入完畢時觸發一個事件，這個事件有自己的事件處理函式。
文件被載入到一個瀏覽器窗口裡，document物件又是window物件的一個屬性。當window物件觸發onload事件時，document物件已經存在了。
//將JavaScript程式碼打包在prepareLinks函式裡，並把這個函式新增到window物件的onload事件上
window.onload=prepareLinks;
function prepareLinks(){
var links=document.getElemntsByTagName("a");
for(var i=0;i<links.length;i++){
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
//別忘記把popUp函式也儲存在那個外部JavaScript檔案裡去
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}