將onmouseover事件分配到延遲生成的列表

Question

我期待在JavaScript中創建一個函數來處理項目列表。該列表是由CMS生成的，我只能用JavaScript來影響它。

假設該列表如下：

<ul id="someUniqueID"> 
    <li class="genericClass" id="uniqueGeneratedID"><a href="link1.htm">Link</a></li> 
    <li class="genericClass" id="uniqueGeneratedID2"><a href="link2.htm">Link 2</a></li> 
    <li class="genericClass" id="uniqueGeneratedID3"><a href="link3.htm">So on and so forth</a></li> 
</ul> 

現在，我知道了JavaScript提供使用

document.getElementById('uniqueGeneratedID').onmouseover = doSomething(); 
function doSomething(){ //code here } 

什麼了我想要做的能力，而不是抓住所有並且爲每個元素分配一個onmouseover函數，而不必具體標識每個元素。

我已經做了這個樣子，

var x = document.getElementsByTagName('li'); 
var changeId = new Array(); 
for (var i = 0; i < x.length; i++) 
{ 
    var j = 0; 
    changeId[j] = x[i].id; 
    j++; 
} 
function mouseOver() { 
for(var y = 0; i < x.length; y++){ 
     document.getElementsById(changeId[y]).onmouseover = test(changeId[y]); 
    }  
} 
function test(storeContent){ 
    document.getElementsById('storeContent').innerHTML = 'printing' + testId; 
} 
mouseOver(); 

當然，問題是，這實際上並沒有產生過事件的ID的任何形式的onmouse。有沒有辦法動態分配所有李的一個onmouseover事件，而無需通過生成一個

document.getElementsById('uniqueGeneratedID').onmouseover = doEvent(); 
document.getElementsById('uniqueGeneratedID2').onmouseover = doEvent(); 

等？

感謝您的任何幫助或建議。

Answer 1

一個快速和骯髒的方法是通過其子搶父<ul>和循環：

var ul = document.getElementById("someUniqueID"), 
    lis = ul.getElementsByTagName("li"); 

for (var i = 0, l = lis.length; i < l; i++) { 
    lis[i].onmouseover = function() { 
     this.style.color = "red"; 
    }; 
} 

例子：http://jsfiddle.net/rttXQ/