原生html绑定onclick事件,使用原生js给每个li绑定onclick点击事件,输出每条li的下标（索引）的几种方式...

使用原生js给每个li绑定onclick点击事件,输出每条li的下标(索引)

htm部分

• 11111
• 22222
• 33333
• 44444
• 55555

首先需要获取页面中每一条li节点

var lis=document.querySelectorAll('li');

1、通过设置属性方式 给每一条li设置属性index为i， 点击时就可以获取this的index属性。

for(var i=0;i

lis[i].index=i;

lis[i].οnclick=function(){

console.log(this.index);

}

}

2、通过设置自定义属性方式， 给每一条li设置自定义属性index为i， 点击时就可以获取this的自定义属性index，同上面方法相似。

for(var i=0;i

lis[i].setAttribute('index',i);

lis[i].οnclick=function(){

console.log(this.getAttribute('index'));

}

}

3、通过bind改变this指向为每一条li，传入第二个参数为i，在点击时就可以获取到i。

for(var i=0;i

lis[i].οnclick=function(i){

console.log(i,this);

}.bind(lis[i],i);

}

4、通过通过闭包自执行函数方式 ，传入参数i，在函数内容返回一个函数体 赋值给每一条点击的li。

for(var i=0;i

//自执行函数把i作为实参，传递进去了，在内层函数进行使用

lis[i].οnclick=(function(index){

// 每个事件都构成了一个闭包，每个闭包里都有一个自己的iindex

return function(){

console.log(index);

}

})(i);

}

5、通过let 的块级作用域特点 获取到的是每个独立的i。

for(let i=0;i

lis[i].οnclick=function(){

console.log(i);

}

}

6、通过数组forEach方式 无论箭头函数还是普通函数都能拿到index

lis.forEach(function(item,index){

item.οnclick=function(){

console.log(index);

}

})

lis.forEach(function(item,index){

item.οnclick=()=>{

console.log(index);

}

})

lis.forEach((item,index)=>{

item.οnclick=()=>{

console.log(index);

}

})

以上内容为自己整理，如有问题评论区欢迎讨论学习