将事件侦听器添加到从数组创建的按钮

Question

我正在从我的数据库中取出的“标签”中创建按钮。我想为每个按钮添加鼠标事件监听器。但是，监听器似乎只能在最后创建的按钮上工作。有任何想法吗？感谢。

var tagsContainer = document.getElementById('tags');
var tagarray = placetags.split(" ");
for (var tagcounter = 0; tagcounter < tagarray.length; tagcounter++){
  var tag = document.createElement('input');
  tag.type = 'button';
  tag.value = tagarray[tagcounter];
  tag.id = 'tagbutton';
  tagsContainer.appendChild(tag);
  tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
  });
  tag.addEventListener('mouseout' , function(){
    tag.style.color = 'orange';
  });
}

Answer 1

您需要从此处更改处理程序

tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
});

到这个

tag.addEventListener('mouseover' , function(){
    this.style.color = 'white';
});

由于使用原始代码，处理程序关闭标记变量，因此tag最终会引用最后创建的按钮。