單獨文檔中的事件處理程序

Question

我想將所有JavaScript保存在單獨的文檔中，我喜歡這種方式。現在我遇到了將代碼從HTML代碼轉移到單獨的JavaScript文檔中的最後一段代碼的問題。

我有兩個事件處理器看起來是這樣的：

<a href="http://www.commercial.se" onclick="confirmLeave()" target="_blank"> 

和

<IMG SRC="folder/pic_small.jpg" alt="Description" onClick="view(this);"> 

這兩個事件處理器的JavaScript代碼：

function confirmLeave() 
{ 
    if(confirm("Vill du lämna Blomstermåla-Bladet?")) { 
    return true; 
    } else { 
    if(window.event) { 
     window.event.returnValue = false; 
    } else { 
     e.preventDefault(); 
    } 
    return false; 
    } 
} 

而且

function view(img) { 
    imgsrc = img.src.split("_")[0] + "_big.jpg"; 
    viewwin = window.open(imgsrc,'viewwin', "width=790,height=444,location=0"); 
    viewwin.focus(); 
} 

我設法改變我的HTML這個解決我沒有我的第一個的onClick事件處理HTML文檔中的JavaScript代碼的問題：

<a href="http://www.commercial.com" id="external-link" target="_blank"> 

，加入這我的JavaScript文件：

function init() 
{ 
    var link = document.getElementById("external-link"); 

    link.onclick = confirmLeave; 
} 

window.onload = init; 

我試過向其他eventhandler添加類似的解決方案，但我無法弄清楚我需要使用的代碼來工作。我想知道如何將該事件處理程序添加到init函數中。

Answer 1

試試這個

<a href="http://www.commercial.com" class="external-link" target="_blank"> 
<IMG SRC="folder/pic_small.jpg" alt="Description" id = "external-image"> 

    function init() { 
    var link = document.getElementById("external-link"); 

    var links = document.getElementsByClassName("external-link"); 
    for (var i = 0; i < links.length; i++) { 
     links[i].onclick = confirmLeave; 
    } 

    var image = document.getElementById("external-image"); 
    image.onclick = view; 
} 

window.onload = init;​ 

而不是IMG在功能只需使用這個

function view() { 
    imgsrc = this.src.split("_")[0] + "_big.jpg"; 
    viewwin = window.open(imgsrc,'viewwin', "width=790,height=444,location=0"); 
    viewwin.focus(); 
} 

Answer 2

如果您不想更改view函數，您可以執行類似的操作，但需要將圖像作爲參數傳遞給view函數。您可以通過將匿名函數設置爲點擊處理程序來完成此操作。

<IMG SRC="folder/pic_small.jpg" alt="Description" id="some-img"> 

function init() 
{ 
    var img = document.getElementById("some-img"); 

    img.onclick = function(){ 
     view(this); 
    }; 
}