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

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

}

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() {orbClicked(this.id)}, false);
        td.appendChild(orbImage);
        tr.appendChild(td);
    }
    table.appendChild(tr);
}

}

不要在运行时函数(回调)中传递id变量，因为它在运行时不可用。只需在运行时获取id并传递，所以"this。Id"将给出被点击图像的Id。