题目 给页面多个li绑定点击事件 并打印顺序
按照我的理解,当然是先写for循环的,但是,我又看到一篇文章写的是[].forEach.call()的方式,第一看到这种,有点懵,讲真
var liArr = document.querySelectorAll('li');
// console.log(liArr);
[].forEach.call(liArr,function(ele,index){
ele.addEventListener('click',function(){
console.log(index);
})
刚开始还没理解,看那篇文章作者的解释才明白
[]
就是个数组,而且是用不到的空数组。用来就是为了访问它的数组相关方法,比如.forEach
。这是一种简写,完整的写法应该是这样Array.prototype.forEach.call(...);
很显然,简写更方便。
至于
forEach
方法,它可以接受一个函数参数:[1,2,3].forEach(function (num) { console.log(num); });
上面的这句代码中,我们可以访问
this
对象,也就是[1,2,3]
,可以看出,这个this
是个数组。最后,
.call
是一个prototype,JavaScript函数内置的。.call
使用它的第一个参数替换掉上面说的这个this
,也就是你要传人的数组,其它的参数就跟forEach
方法的参数一样了。[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"
其实就是,
先用dom获取到所有的li,再用一个空的数组使用call()将this指向从空数组换成刚获取到的 li 数组,从而用forEach为 li 数组的每个子元素添加上事件处理