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

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

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'; 
    }); 
}

来源

2012-12-08 stokexx

这样的事情？ http://jsfiddle.net/mjqWL/3/ – Blender

谢谢。当然是一个简单的“this.style.color”而不是“tag.style.color”！ – stokexx

对不起，我甚至没有意识到我改变了这一点。亚当的答案解释了原因。 – Blender

你需要从这个

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

改变你处理这个

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

因为你的原代码，你的处理程序是收盘在标签变量，依此tag最后引用最后创建的按钮。

来源

2012-12-08 02:52:32

但是我仍然看到多个按钮。现在我只是想做mouseover/mouseout事件。 – stokexx

@stokexx - 的确 - 请参阅我的编辑 –

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

回答

相关问题