addEventListener單擊之前單擊已執行

Question

我想在click函數中傳遞參數。

var albums = document.getElementsByClassName("album"); 
for(var i = 0; i<albums.length; i++){ 
    document.getElementById(albums[i].id).addEventListener("click", goAlbum(albums[i].id), false); 
} 

然而，在創建時的功能「goAlbum」被excecuted，然後該函數將不再excecute。 我做錯了什麼？

Answer 1

goAlbum因爲您調用該函數而執行。你不是「創造」一個功能。你打算做的是提供addEventListener邏輯，當點擊某物時執行;該邏輯是「調用goAlbum」。爲此，請將函數調用包裝在匿名函數中。

function toArray(list) { 
    return Array.prototype.slice.call(list); 
} 

var albums = toArray(document.getElementsByClassName("album")); 
albums.forEach(function (album) { 
    document.getElementById(album.id).addEventListener("click", function() { 
     goAlbum(album.id); 
    }, false); 
}); 

此外，由於it is unwise to create functions in a for loop，我已經重構代碼以使用forEach。我需要將由document.getElementsByClassName返回的NodeList轉換爲Array以便使用forEach，因此使用toArray函數。