将相同的事件侦听器添加到具有不同参数的多个元素

Question

我已经坚持了好几天了。

我有一个JavaScript函数，该函数创建一个10x10表，每个td元素中包含100张图像。 在创建这些图像时，我向它们添加了一个onclick事件侦听器，并带有其ID号的参数。 单击这些图像时，它们应弹出一个警报，并在内容中显示其ID号。 但是，警报消息显示给我“ [object MouseEvent]”。 我不知道是什么原因造成的。 我一直在搜索w3schools，stackoverflow和其他博客，但到目前为止并没有太大的成功。

这是JS代码：

function orbClicked(orb) {
    alert(orb);
}

function initField() {
    var table = document.getElementById("gameField");

    for (var i = 0; i < 10; i++) {
        var tr = document.createElement("tr");

        for (var j = 0; j < 10; j++) {
            var td = document.createElement("td");
            var orbNumber = i * 10 + j;

            var orbImage = document.createElement("img");
            orbImage.setAttribute("src", "images/orb_empty.png");
            orbImage.setAttribute("id", "orb" + orbNumber);
            orbImage.addEventListener("click", function(orbNumber) {orbClicked(orbNumber)}, false);

            td.appendChild(orbImage);
            tr.appendChild(td);
        }

        table.appendChild(tr);
    }
}

预先感谢您的帮助！

Answer 1

function orbClicked(orb) {
alert(orb);

}

函数initField（）{var table = document.getElementById（“ gameField”）;

for (var i = 0; i < 10; i++) {
    var tr = document.createElement("tr");

    for (var j = 0; j < 10; j++) {
        var td = document.createElement("td");
        var orbNumber = i * 10 + j;

        var orbImage = document.createElement("img");
        orbImage.setAttribute("src", "images/orb_empty.png");
        orbImage.setAttribute("id", "orb" + orbNumber);
        orbImage.addEventListener("click", function() {orbClicked(this.id)}, false);

        td.appendChild(orbImage);
        tr.appendChild(td);
    }

    table.appendChild(tr);
}

}

不要在运行时函数（回调）中传递id变量，因为它在运行时将不可用。 只需在运行时获取id并传递，则“ this.id”将提供点击图片的ID。