H5基础知识第十一课时(JS解决变量自提升问题)

解决变量自提升
<ul>
    <li id="zhangSan">张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>孙六</li>
    <li>田七</li>
</ul>


<button id="changeBtn">变!!!</button>


/*最原始方法 有变量自提升现象*/
var allList = document.getElementsByTagName("li");
for(var i=0;i<allList.length;i++) {
    /*当你进入网页时，function方法虽然加载了，但是没有执行，只有当你点击时才会执行。
    但是这时i早已经自加成最后一个数*/
    allList[i].addEventListener("click",function () {
        var content = allList[i].innerHTML;
        alert(content);
    })
}


/*解决JS变量自提升的方法：*/
/*ES6的let常量方法*/
var allList = document.getElementsByTagName("li");
    for(let i=0;i<allList.length;i++) {
        allList[i].addEventListener("click",function () {
            var content = allList[i].innerHTML;
            alert(content);
        })
    }
/*匿名自调用方法*/
var allList = document.getElementsByTagName("li");
for(let i=0;i<allList.length;i++) {
    (function (i) {
           allList[i].addEventListener("click",function () {
           var content = allList[i].innerHTML;
           alert(content);
           })
   }
    )(i);
}