javascript - 只有我使用innerHTML 添加的最后一个元素保留其事件处理程序，为什么？

Question

我正在尝试制作一个脚本，在标记页面列表中注入(inject)可交互的对象信息。每当我尝试在 div 上添加 onclick 事件时，它都工作正常，但是每当我尝试在 for 循环中添加更多事件时，它都不会按我预期的方式工作。

我在网页调试器中使用断点查看了发生的情况，我发现问题在于它似乎在添加到下一个 div 之前删除了前一个 div 上的事件。最后，剩下的唯一事件是循环退出后的最后一个 div。

我想将这些事件保留在我的所有 div 上，而不仅仅是最后一个......这里似乎有什么问题？

var objects = ['Tom', 'Sauna', 'Traum'];

for (var i = 0; i < objects.length; i++){
    document.getElementById('list').innerHTML += "<div class='item' id='"+ i +"'>" + objects[i] + "</div>";
    document.getElementById(i).addEventListener("mouseup", function() {
        Select(this);
    });
}

function Select(char) {
    console.log(char);
}

div.item {
    border: 1px solid black;
    padding: 4px;
    margin: 4px;
}

<div id="list"></div>

Answer 1

当您更改innerHTML时，浏览器会重建元素的内容，并丢弃所有附加的事件处理程序。使用 DOM 方法代替:

    for (let i = 0; i < objects.length; i++){
        var block = document.createElement('div');
        block.setAttribute('id', i);
        document.getElementById('list').appendChild( block );
        block.addEventListener("mouseup", function() {
            Select(this);
        });
    }

UPD:或者使用 insertAdjacentHTML 方法而不是重新定义 innerHTML:

document.getElementById('list').insertAdjacentHTML(
    'beforeend', "<div id='"+ i +"'>" + i + "</div>");