为什么事件侦听器只注册在for循环中创建的最后一个元素?

Question

我正在使用JavaScript创建复选框，向它们添加onchange侦听器并使用循环将它们添加到div中。但是，只有最后一个复选框注册了事件侦听器。

为什么会发生这种情况?

var div = document.getElementById("mydiv");
for (var i = 0; i < 5; i++) {
    div.innerHTML += ("<br>" + i);
    var input = document.createElement("input");
    input.type = "checkbox";
    input.onchange = function() {
      alert("foo");
    };
    div.appendChild(input);
}

<div id="mydiv"></div>

Answer 1

使用Element.innerHTML属性追加div删除现有的事件处理程序，因为它确实是这样做的…

div.innerHTML = (div.innerHTML + '<br>' + i); 

所以它完全重写了HTML，所有的事件处理程序都丢失了。

用Document.createElement()和Document.createTextNode()代替。

var div = document.getElementById("mydiv");
for (var i = 0; i < 5; i++) {
    div.appendChild(document.createElement('br'));
    div.appendChild(document.createTextNode(i));
    var input = document.createElement("input");
    input.type = "checkbox";
    input.onchange = function() {
      alert("foo");
    };
    div.appendChild(input);
}

<div id="mydiv"></div>