如何在js中动态添加事件

Question

当我得到一些 json 数据时，我想在页面中显示它们：

代码：

    function update(){

      for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=function(){
          alert ("id:"+data[i].id);
        }

      }
}

但是，我得到错误： data[i]i is not defined。

反正？

顺便说一句，因为我在手机上发布了这个问题，所以我不能很好地格式化代码。我希望有人能帮我一个忙。

更新：

    function update(){

      for(var i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        l.tindex=i;
        document.getElementById("ul_con").appendChild(l);
        l.onclick=function(){
          alert ("id:"+data[this.tindex].id);
        }

      }
}

这段代码也有效，但我想知道为什么当点击事件发生时可以使用“数据”而“i”不能？

Answer 1

当onclick事件触发时， data[]数组脱离上下文。 你需要改用this ，即

l.onclick=function(){
   alert ("id:"+this.id);
}

Answer 2

当 onclick function 被调用时，它比您连接事件处理程序时要晚得多，数据和 i 值可能不再是您连接 ZC1C425268E68384F1AB450 时的样子，因此您不能依赖它们。 事实上，i 值保证不会相同，因为它会因为循环的后续交互而提前。 数据值可能有效也可能无效，具体取决于代码的 rest。

您可以冻结它们以在事件处理程序中使用，如下所示：

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=(function(mydata, index){     // define function that gets called at assignment time
            // variables mydata and index are available here in this scope
             return function() {
                alert ("id:"+mydata[index].id);
            };
       })(data, i);   // pass data and i into the inner scope
    }
}

通过这样做，第一个函数(data,i) 在分配 onclick 处理程序时执行。 这将评估数据和 i 并通过 function 闭包确定它们用于内部 function 的值。 有关描述和更多示例，请参阅此文章。 由于data是一个数组，因此您不会在此处复制它（它是通过引用传递的），因此您必须确保其值保留到单击处理程序的时间（尽管它不会 go 超出 scope因为这个闭包保留了它）。 i 的值被复制到 function 参数中，因此您不必担心外部循环会更改 i 的值。

当它看起来像这样时，它有点不那么令人困惑并且更容易理解，但是如果你研究这两者，你会发现它们真的是一回事，第一个例子只是有一个内联无名 function 定义：

function processMyClick(mydata, index) {
    return function() {
        alert ("id:"+mydata[index].id);
    };
}

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=processMyClick(data, i);
    }
}

如果您只需要该数据结构中的几条数据，那么您可能只想将其放在 DOM object 本身上，如下所示：

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.myId = data[i];
        l.onclick=function() {alert(this.myId);};
    }
}

将数据放在 DOM 对象上时，您必须小心进行适当的清理，以避免潜在的 memory 泄漏或循环引用，如果您创建/销毁其中很多并在旧浏览器中运行的话。