javascript - イベント ハンドラーを使用した JavaScript クロージャーについて

Question

私はJavaScriptに非常に慣れていません。最近、クロージャーを理解しているときに、インタビュアーから尋ねられた1つの質問に出くわしました:-

function initButtons() {
    var body = document.body,
        button, i;

    for (i = 0; i < 5; i++) {
        button = document.createElement("button");
        button.innerHTML = "Button " + i;
        button.addEventListener("click", function (e) {
            alert(i);
        }, false);
        body.appendChild(button);
    }
}
initButtons();

このコードの出力は何ですか? 私が答えたのは、「ボタンに対応する番号.. 1、2など」です。

さて、私はぐるぐる回って、次のような答えを見つけました：-

これが発生する理由は、for ループの各反復中に addEventListener メソッドが呼び出されると、クロージャが作成されるためです。

さて、すべてが私の頭の上で進んでいます...どうしてこれが可能ですか? 率直に言って、私は JavaScript が苦手で、できるだけ多くのことを学ぼうとしています。ということで、基礎からやっていきます!!

その間、how-do-javascript-closures-work の詳細も読んでいます