给多个li循环绑定事件,输出每个li的索引值,(里面的内容也可)四种方法

javaScript 循环给每个li绑定事件,输出当前点击li标签的索引值

div class="container">
        <ul>  
            <li>yellow</li>
            <li>red</li>
            <li>blue</li>
            <li>orange</li>
            <li>black</li>
            <li>pink</li>
        </ul>
    </div>

问题程序!

 var colorUl = document.getElementsByTagName("ul")[0];
    var colorLi = colorUl.children;
    console.log(colorLi);
    for(var i = 0; i < colorLi.length; i ++){
        colorLi[i].onclick = function(){
            console.log(i);
        }
    }

问题分析
该程序运行无论点击哪一个li都是会输出6,因为在循环执行的过程之中,函数表达式是不会执行的,当i = 6 的时候,循环不执行,那么开始执行函数,值得注意的是 console.log(i) 里面的i并且当前colorLi[i]中的i 而是指向本作用域的i, i = 6

##### 方法一
javaScript for(var i = 0; i < colorLi.length; i ++){ colorLi[i].index = i; colorLi[i].onclick = function(){ console.log(i); } }

给当前对象colorLi 绑定一个属性,让这个属性值为当前i,相当于手动设置了一个索引值.
##### 方法二
javaScript for(var i = 0; i < colorLi.length; i ++){ (function(i){ colorLi[i].onclick = function(){ console.log(i); } }(i)) }
利用立即执行函数的和闭包特性来解决问题

##### 方法三
javaScript for(let i = 0; i < colorLi.length; i ++){ colorLi[i].index = i; colorLi[i].onclick = function(){ console.log(i); } }

使用es6语法块级作用域变量声明

##### 方法四
javaScript colorUl.addEventListener("click",function(e){ var e = e || window.e; var target = e.target || e.srcElement; console.log(target.innerHtml) switch(target.id){ case "yellow":console.log(1); break; case "red":consoleh.log(2); break; case "blue":console.log(3); break; case "black": console.log(4); break; case "pink":console.log(5); } },false)

个人感觉这个方法虽然书写麻烦,(还要自己加索引值输出,给每个li添加id) 如果要其他需求不必这样,但是架不住,这个代码执行效率高,可以提高性能,