javascript - 时间委托,可以用forEach循环么?

Question

很经典的问题,就是点击对应标签,弹出相应的序号

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

我的js 这样写为什么不行,不能用forEach么,只能用for循环?

var list=document.getElementById('list');
var listChild=list.children;
list.addEventListener('click',function(e){
    target=e.target||e.srcElement;
    console.log(target);
    // for(var i=0 ,len=listChild.length;i<len;i++){
    //     if(listChild[i]==target){
    //         alert(i)
    //     }
    // }
    listChild.forEach(function(item,index){
        if(item==target){
            alert(index);
        }
    })
},false)

Answer 1

嗯，这个问题就涉及到了 Nodelist 的定义了，和事件委托没什么关系其实。

代码中使用 list.children 获取的 li 集合其实不是真正意义上的数组，而是 Nodelist，Nodelist可以像数组一样通过 list[n] 的方式去获取每一个元素，但是由于它本质上不是数组，所以当然无法通过 list.forEach 去遍历，因为这些函数都是数组才实现的函数。
这个其实和 arguments 很类似, 所以如果你一定要使用 forEach 的话，可以先将 Nodelist 转化为 Array：

var listChildArr = Array.prototype.slice.apply(listChild);
listChildArr.forEach(function(item, index) {
    // your code 
})