原生js点击ul下边li显示其索引值的”n“种方法

话不多说，直接上代码！

第一种方法：

<ul id = "list">
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function() {
console.log(this.index);
}
}

第二种方法：关于let的定义：

let

 允许把变量的作用域限制在块级域中。与var的区别在于var
声明要么是全局变量或者是局部变量，而无法变为块级

var list = document.getElementById("list");

　　 for (var i = 1; i <= 5; i++) {

　　　　 var item = document.createElement("LI");

　　　　 item.appendChild(document.createTextNode("Item " + i));

　　　　 let j = i;

　　　　 item.onclick = function (ev) {

　　　　　　console.log("Item " + j + " is clicked.");

　　　　};

　　　　list.appendChild(item);

　　　　};


结果当声明
j 为let的时候，每次点击一个li，每一个li都有自己的事件，输出结果为：ITem1 is clicked，ITem2
is clicked，ITem3
is clicked，ITem4
is clicked，ITem5
is clicked。

而我再次把let
j = i换成 var j = i时候，每点击一次li输出结果为：ITem5 is clicked。因为var  j = i 是局部变量，5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。而当用let声明后，

j
变成块级域（也就是花括号中的块，每进入一次花括号就生成了一个块级域）,所以 5 个内部函数指向了不同的 j 。

第三种方法：利用事件委托机制

如果li较少的话，利用上面方式实现是可以的，但是如果li的数量过多，为每个li添加事件侦听就会对页面性能产生很大的影响，我们可以采用委托实现。

利用Array.prototype.slice.call(nodeList)的作用是将具有length属性的元素转为数组，这样可利用indexOf方法获取li的索引值。

<script>
var nodeList = document.getElementsByTagName('li') ,
arrNodes = Array.prototype.slice.call(nodeList) ,
nodeUls = document.getElementsByTagName('ul') ;
nodeUls[0].addEventListener("click",function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
alert(arrNodes.indexOf(target))
},false);
</script>

第四种方法：利用闭包，

<script>
var nodeList = document.getElementsByTagName('li');
for (var i = 0; i < nodeList.length; i++) {
(function(j){
nodeList[j].addEventListener("click", function(e) {
alert(j)
}, false);
})(i) ;
}
</script>
有关闭包具体内容是一个难点，另外去探索；

第五种方法：自定义属性；

<ul class="list">
<li data-index="0">1</li>
<li data-index="1">2</li>
<li data-index="2">3</li>
<li data-index="3">4</li>
<li data-index="4">5</li>
</ul>
var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
li[i].setAttribute("data-index",i)//属性不定义也是可以的；
li[i].onclick = function(e){
console.log(e.target.getAttribute("data-index"))
}
}

第六种方法：

var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
li[i].setAttribute("data-index",i)
li[i].onclick = function(e){
console.log(e.target.dataset.index);

}
}

第七种方法：

<script type="text/javascript">
var ul = document.getElementById("list");
var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
let index = i;
li[i].onclick = function(e){
console.log(index);
}
}
</script>
此种方法依据let  es6语句实现；

哪位好友还有好的方法欢迎留言！！谢谢！