带有insertCell问题的onclick事件-Javascript

这是我当前的javascript代码：

function GetEvents()
{   
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange  = function()
{
    if (this.readyState == 4 && this.status == 200) 
    {
        var eventObjects = JSON.parse(this.responseText);

        var table = document.getElementById("EventsTable"); //Gets the Table in the HTMl
        //Loops through the passed in array and adds each event in the table
        for(i = 0; i < eventObjects.length; i++)
        {
            var startDate = new Date(eventObjects[i].eventStart);
            var eventStart = startDate.getDate() + " / " + startDate.getMonth() + " / " + startDate.getFullYear();
            var ID  = eventObjects[i].eventID;

            var row = table.insertRow(1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = eventObjects[i].eventName;
            cell2.innerHTML = eventStart;
            cell3.addEventListener("click", function(){GetEventInfo(ID); });

            //Adds Image to third cell;
            var img = document.createElement('img');
            img.src = "EventIcon.png"
            cell3.appendChild(img); 
        }           
    }
}
xmlhttp.open("GET", "php/includes/GetEvents.php", true);
xmlhttp.send();
}

function GetEventInfo(eventID)
{
    alert(eventID);
}

然后我用这个来添加onclick动作：

cell3.addEventListener("click", function(){GetEventInfo(ID); });

这可以正确地执行onclick操作，当我单击事件时，它们会运行函数，但我遇到的问题是，传入的ID对于每个事件都是完全相同的，因此无论我单击哪个事件，它都会打印出它不应该打印的同一个事件ID，即eventID是第一个或最后一个事件

---

有人知道为什么会发生这种情况吗？

所有

var

变量都被提升-它具有功能范围，因此一旦所有迭代完成，每个

ID

都会引用您分配的最后一个ID

对于口译员来说，它实际上是这样的：

xmlhttp.onreadystatechange  = function()
{
var ID;
// ...
// ...
  // <start for loop>
    ID  = eventObjects[i].eventID;
    // ...
    cell3.addEventListener("click", function(){GetEventInfo(ID); });

xmlhttp.onreadystatechange=function（）
{
变量ID；
// ...
// ...
// 
ID=eventObjects[i].eventID；
// ...
cell3.addEventListener（“单击”，函数（）{GetEventInfo（ID）；}）；

改用

const

：

const ID=eventObjects[i].eventID；

---

尽量不要使用

var

，这会使代码推理变得困难。请使用

const

和

let

，因为它们具有块作用域且不被提升。如果您必须支持不识别ES2015语法的古代浏览器，请在编写代码后使用Babel将代码传输到ES2015。

感谢您的指导蚂蚁响应！XD

xmlhttp.onreadystatechange  = function()
{
var ID;
// ...
// ...
  // <start for loop>
    ID  = eventObjects[i].eventID;
    // ...
    cell3.addEventListener("click", function(){GetEventInfo(ID); });