Tại sao trình xử lý sự kiện chỉ đăng ký trên phần tử cuối cùng được tạo trong vòng lặp?

Question

Tôi đang tạo hộp kiểm bằng JavaScript, thêm người nghe onchange vào họ và thêm chúng vào div bằng cách sử dụng vòng lặp. Tuy nhiên, chỉ hộp kiểm cuối cùng mới có trình xử lý sự kiện được đăng ký.

Tại sao điều này lại xảy ra?

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

Phụ thêm để div sử dụng Element.innerHTML sở hữu loại bỏ các trình xử lý sự kiện hiện có bởi vì nó thực sự là làm điều này ...

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

Vì vậy, nó hoàn toàn viết lại mã HTML và tất cả các sự kiện xử lý bị mất.

Sử dụng Document.createElement() và Document.createTextNode() để thay thế.

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>