對js事件綁定的一些理解

今天在做項目的時候，在一個for循環裏面添加了onclick事件，事件處理程序的輸出結果並不隨着循環變量的變化而變化。

我採用以下代碼進行驗證。

    <input type="button" value="複製">
    <script>
        for (i = 0; i < 3; i++) {
            $(":button").on("click", function() {
                alert(i);
            })
        }
    </script>

瀏覽器分別輸出三次3

經過查閱文檔及書籍後，我認爲是以下原因：

在三次循環過程中，button被綁定了三個onclick事件，但事件處理函數內部的變量並不確定。在點擊按鈕觸發事件後，從document開始進行事件捕獲，運行事件處理程序，事件冒泡。

在事件處理過程中，事件處理程序函數內部變量是當前內存中儲存的數值。在上述代碼中，點擊button時循環已經結束，i的值爲3，因此瀏覽器會分別輸出三次3。