为什么事件侦听器只在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

追加div使用该Element.innerHTML属性会删除现有的事件处理程序,因为它实际上正在执行此操作...

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>