將事件監聽器添加到從數組創建的按鈕

我正在創建從我的數據庫中取出的「標記」的按鈕。我想將鼠標事件偵聽器添加到每個按鈕。但是，聽衆似乎只能在最後創建的按鈕上工作。有任何想法嗎？謝謝。將事件監聽器添加到從數組創建的按鈕

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 - 的確 - 請參閱我的編輯 –

將事件監聽器添加到從數組創建的按鈕

回答

相關問題