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

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最终引用创建的最后一个按钮。