javascript - JavaScript: イベント ハンドラーは自分自身を上書きしていますか? このケースでリフローを縮小する方法は?

Question

次のコードを使用して、HTML リストのマークアップを作成し、すべてのリスト要素にイベント ハンドラーをアタッチします。

リストは期待どおりに作成され、すべてが正常に機能しているように見えます。唯一の問題は、I am 4何liをクリックしても常にアラートが表示されることです。では、すべてのイベント ハンドラーが前のイベント ハンドラーを上書きしていると思いますが、なぜでしょうか?

また、この方法には大きな欠点が 1 つあります。イベント リスナーを追加する前に、すべてliを DOM に追加する必要があり、多くのリフローが発生するからです。すべてのli要素を に追加し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);
    }
}