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函数。