Question

function newMenu(items,results){
    document.getElementById("menu").innerHTML = "";
    for (var i = 0; i < items.length; i++) {
        document.getElementById("menu").innerHTML += "<li>" + items[i] + "</li>";
        document.getElementById("menu").childNodes[i].addEventListener("click",function(){document.write("foo")});

    };
}

我正在尝试使用此代码生成一个列表，然后为每个列表项提供一个不同的功能，以便在单击它们时激活（现在我只是将它们全部写为“foo”来测试事件听众工作）。但是，当我运行此函数时，它将正确地写入所有列表内容（它们作为数组传递到'items'）。

我的问题出现在事件监听器上。只有最后一个列表项的事件侦听器才有效。也就是说，只有当我点击列表中的最后一个li时才会执行document.write（“foo”）。我已经尝试过更改items数组的大小，每次都是最后一个列表项，无论长度如何。为什么会这样？事件监听器是否会相互覆盖？

Answer 1

哇！我花了一段时间才弄明白。问题是，当你打电话

document.getElementById("menu").innerHTML += "<li>" + items[i] + "</li>"

您完全用新列表项替换现有节点。不要将字符串附加到现有的innerHTML，而是使用appendChild()函数

for (var i = 0; i < items.length; i++) {
  node = document.createElement("li");
  node.innerText = items[i];
  node.addEventListener("click", function() { console.log("ok") });
  document.getElementById("menu").appendChild(node);
};

事件听众互相覆盖？

1 个答案: