javascript - 识别列表项索引 - 哪种方法更好？

Question

我需要从列表中选取列表项，然后执行诸如在其上添加事件处理程序之类的操作。我可以想到两种方法来做到这一点。

HTML:

    <ul id="list">
       <li id="listItem-0"> first item </li>
       <li id="listItem-1"> second item </li> 
       <li id="listItem-2"> third item </li> 
    </ul>

1. 使用 ID-

   for(i=0;i<3;i++)
   {
      document.getElementById("listItem-"+i).addEventListener("click",foo,false);
   }
   

2. 使用 childNodes 属性-

   for(i=0;i<3;i++)
   {
     document.getElementById("list").childNodes[i]
        .addEventListener("click",foo,false);
   }
   

我使用第一种方法的原因是，在函数 foo 中，如果我想要该项目在列表中所在的索引，我可以通过拆分 id 来实现 -

    function foo()
    {
      tempArr = this.id.split('-');      
      index = tempArr[tempArr.length-1]; // the last element in the array
    }

我想不出使用第二种方法来做到这一点，即不使用 id 命名方案。

问题:

1. 如何使用第二种方法或任何更好的方法获取索引
2. 采用第一种方法是否会产生一些非常不好的影响？

Answer 1

您可以通过向包含元素(无序列表)添加单个事件处理程序并利用事件冒泡的概念来避免向每个列表项添加事件处理程序。在此单个事件处理程序中，您可以使用事件对象的属性来确定单击的内容。

您似乎想要将数组中的数据映射到列表项。虽然从列表项 id 中解析出数组索引是可行的，但另一种方法是将列表项上的“键”值存储为扩展，并使用 javascript 对象属性来查找数据。

部分示例:

<li key="myKey">

//oData is a object (eg. var oData = {};) that has been populated with properties
//whose value is the desired data (eg. oData["myKey"] = 123;)

alert(oData[event.srcElement.key]); // alerts 123

就您展示的第一种技术的不良影响而言，一个不良影响是，对于许多列表项，您最终会定义许多事件处理程序，这在某些时候会对性能产生影响。

另请注意，您可能会通过省略“i”的 var 关键字而无意中在循环中创建全局 var。