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

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 变量，因此tag最终会引用创建的最后一个按钮。