Javascript 生成的事件侦听器列表仅触发最后一个

以下是演示的完整代码：

基本上，我使用

FOR

循环生成多个事件侦听器。我生成了多个

，希望检测onChange事件并返回已更改的特定select的ID。然而，似乎只有最后一个eventlistener幸存下来，而其他eventlistener没有触发

对这种行为有何解释

HTML

JAVASCRIPT

var slotnameHtml = '';
for (var i = 0; i < 3; i += 1) {
    var slotname = document.createElement('select'),
        slottime = document.createElement('select'),
        slotlist = document.createElement('li');
    slotname.innerHTML = slotnameHtml;
    slottime.innerHTML = '<optgroup><option value="1">00:01</option><option value="2">00:02</option></optgroup>';
    slottime.id='test'+i;
    slotlist.appendChild(slotname);
    slotlist.appendChild(slottime);
    document.getElementById('slots').appendChild(slotlist);
    slottime.addEventListener('change', function () {
        alert(slottime.id)
    });;
}

var slotnameHtml=''；
对于（变量i=0；i<3；i+=1）{
var slotname=document.createElement（'select'），
slottime=document.createElement（'select'），
slotlist=document.createElement（'li'）；
slotname.innerHTML=slotnameHtml；
slottime.innerHTML='00:0100:02'；
slottime.id='test'+i；
slotlist.appendChild（slotname）；
slotlist.appendChild（slottime）；
document.getElementById（'slots'）.appendChild（slotlist）；
slottime.addEventListener（'change'，function（）{
警报（slottime.id）
});;
}

这是因为绑定到

的处理程序不会立即运行，而是在以后运行。同时，您的
for
循环已运行，并且
slottime
已恢复到其最终值（您创建的最后一个
元素）。所有处理程序将只看到该值

您可以引入闭包，以便处理程序可以访问正确的元素：

document.getElementById("slots").appendChild(slotlist);
(function(slottime) {
    slottime.addEventListener("change", function() {
        alert(slottime.id);
    });
})(slottime);

正如Teemu在评论中严格指出的那样，最简单的解决方案是利用
这个
绑定到处理程序中的目标元素的事实：

slottime.addEventListener("change", function() {
    alert(this.id);
});

您必须使用所安装的以下警报参数：

alert(this.getAttribute('id'));

在事件处理函数中使用
this.id
是否会简单得多？@Teemu，是的，但这样做不会向提问者解释根本问题：）不过，我会将其添加到我的答案中。我对闭包不太熟悉，所以会做一些研究：）。但是代码似乎起作用了。谢谢！你为什么在这里用这个？？？。它对应什么…。哪个globalobject？是slottime吗？你为什么在这里用这个？这对应什么？哪个globalobject？是slottime吗？当调用函数时，它将在调用函数时使用变量slottime的值，而不是在创建时。。。您必须获取调用函数的元素的id，为此，您应该使用对应于调用函数的元素的id，如果您打开浏览器的开发工具，检查元素，您会看到元素的id您没有正确回答问题兄弟..我在本例中问的是$this对应于variable slottime..这里slottime调用函数…没有变量$this，有$（this）返回与调用元素对应的jQuery元素
alert(this.getAttribute('id'));