javascript - JavaScript：我的事件处理程序是否会覆盖自身？在这种情况下如何减少回流？

Question

使用以下代码，我尝试为 HTML 列表创建标记，然后将事件处理程序附加到每个列表元素。

该列表按预期创建，一切似乎都工作正常，唯一的问题是它总是提醒I am 4，无论li我点击什么。所以我猜每个事件处理程序都会覆盖前面的，为什么？

我还看到了我这样做的一个很大的缺点，因为我必须在添加li事件侦听器之前将每个添加到 DOM，这会导致大量回流。我宁愿将所有li元素添加到 DOM 中ul，然后将完整列表添加到 DOM 中。是否可以这样做并添加事件处理程序？

一般来说，也许有更好的方法？

MyTest.prototype.createDots = function() {
    var self = this;
    var dots = document.createElement("ul");

    this.element.parentNode.appendChild(dots);

    for (var i = 0; i <= 3; i++) {
        var dot = document.createElement("li");

        dot.innerHTML = "" + i;
        dot.setAttribute("id", "dot-" + i);
        dots.appendChild(dot);

        document.getElementById("dot-" + i).addEventListener("click", function() {
            alert("I am " + i)
        }, false)

        console.log(i);
    }
}