Почему прослушиватель событий регистрируется только на последнем элементе, созданном в цикле 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>