原生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语句实现；

哪位好友还有好的方法欢迎留言！！谢谢！it is my second time to updata