Olay dinleyicisi neden sadece for döngüsünde oluşturulan son öğeye kayıt olur?

Question

JavaScript kullanarak onay kutularını oluşturuyorum ve bunlara onchange dinleyiciyi ekleyerek bunları bir döngü kullanarak bir div'e ekliyorum. Ancak, yalnızca son onay kutusu olay dinleyicisine kayıtlı.

neden oluyor? Gerçekten bunu yapıyor çünkü varolan olay işleyicileri kaldırır Element.innerHTML özelliğini kullanarak div için ekleme

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.innerHTML = (div.innerHTML + '<br>' + i); 

Yani tamamen HTML ve tüm olayı yeniden yazar İşleyiciler kayıp.

Document.createElement() ve Document.createTextNode() kullanın.

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>