在javascript中正确引用html列表项对象以进行事件注册

时间:2008-12-10 05:46:02

标签: javascript html dom event-handling html-lists

我想知道如果我有以下html列表,我可以如何引用列表项对象

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>  

如果没有必须具有唯一的elementId,如何向Item2 li注册onclick是可能的 例如,我可以为subdiv_3这样做,因为它有一个唯一的ID,不在列表中

document.getElementById('subdiv_3').addEventListener('click', function();, false);

我的目标是最终为每个列表对象分配一个函数,对于具有基于列表对象编号的唯一参数的列表对象的数量,例如:

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}

3 个答案:

答案 0 :(得分:2)

您可以获得subdiv_3 <li>的所有子元素。然后迭代遍历该循环,添加函数。

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

查看代码示例,当您在创建函数的循环中时,可能会遇到闭包范围问题。 (所有函数似乎都使用相同的i值。)查看我对这个问题的答案来处理这个问题:How to Add Event Handler with Arguments to an Array of Elements in Javascript?

答案 1 :(得分:1)

@Supernovah:您实际上可以将实际功能分配给setTimeot()。这会让你无法理解字符串格式,当你想做更复杂的事情而不仅仅是设置一个属性时,这将阻碍你。

这是代码:

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

简短的解释:

使用闭包是确保setTimeout()触发时所有变量仍具有预期值的技巧。

您可以通过编写返回函数的函数来完成此操作。外部函数接受参数,内部函数不接受。但它引用到外部函数的参数。在循环中,您可以调用外部函数(使用正确的参数)并每次都获得一个全新的内部函数,每个函数都有自己的参数值版本。这是您分配给setTimeout()的那个。

答案 2 :(得分:0)

响应Benry的答案的评论亨利,在使用他的代码后,以下证明每个元素都可以用els [i]

引用
function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
豫ICP备18024241号-1