点击输出索引号4中方法

功能：给一系列的元素绑定点击事件，输出它的索引号
css代码

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            width: 120px;
            background-color: #ff0;
            color: #fff;
            font-size: 40px;
            margin-bottom: 10px;
        }

html代码

    <ul>
        <li class="list">11</li>
        <li class="list">22</li>
        <li class="list">33</li>
        <li class="list">44</li>
        <li class="list">55</li>
    </ul>

js代码

    var oList = document.querySelectorAll("li");

    // 1.for循环中用let
    // for (let i = 0; i < oList.length; i++) {
    //     oList[i].onclick = ()=>console.log(i);

    // }
    // 2.创建index属性
    // for(var i = 0 ; i < oList.length ; i ++){
    //     oList[i].index = i ;
    //     oList[i].onclick = function(){
    //         console.log(this.index);
    //     }
    // }

    // 3. 数组迭代的方法
    // oList.forEach(function(r,i){
    //     r.onclick = ()=>console.log(i);
    // })

    // 4.闭包
    for (var i = 0; i < oList.length; i++) {
        (function (e) {
            oList[e].onclick = () => console.log(e);
        })(i);   // 这里的i相当于实参传入到函数里面
    }