单击之前执行addEventListener单击

时间:2014-12-02 08:34:44

标签: javascript javascript-events addeventlistener

我想在点击功能中传递参数。

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);
}

然而,功能&#34; goAlbum&#34;在创建时会被激活,然后该功能不再成功。 我做错了什么?

1 个答案:

答案 0 :(得分:5)

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。我需要将NodeList返回的document.getElementsByClassName转换为Array,以便使用forEach,从而使用toArray函数。