将 onmouseover 事件分配给动态生成的列表答案

【问题标题】：Assign onmouseover events to Dyanmically genereated list将 onmouseover 事件分配给动态生成的列表
【发布时间】：2011-10-10 20:56:33
【问题描述】：

我希望在 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 }

我想做的是获取所有这些 li 并为它们中的每一个分配一个 onmouseover 函数，而不具体标识每个 li 元素。

我一直是这样的，

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 生成任何类型的鼠标悬停事件。有没有一种方法可以动态分配所有 li 的 onmouseover 事件而无需生成

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

等等？

感谢您的任何帮助或建议。

【问题讨论】：

标签： javascript onmouseover dynamic-html

【解决方案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/

【讨论】：