JS18-解决案例中this、for、for...in的问题

<div>我是div</div>

<ul>
    <li index="1">我是第一个</li>
    <li index="2">我是第二个</li>
    <li index="3">我是第三个</li>
    <li index="4">我是第四个</li>
</ul>

<script>
    // 解决demo中的一些问题

    // 1, onclick 中 关于this的问题

    // 给所有的li标签,添加点击事件
    // 输出不同的具体内容

    var oLis = document.querySelectorAll('li');

    // 方法1 , forEach()循环
    // forEach 是一个特殊的循环
    // 每次都建立一个不同的,特殊的变量,存储的是相互不影响的,独立的数据
    // 因此,item变量,可以在点击事件中直接使用
    // item.getAttribute('index')   this.getAttribute('index')

    // oLis.forEach(function(item){
    //     item.onclick = function(){
    //         // 事件中
    //         // itme可以直接使用,获取触发点击事件的标签的属性
    //         console.log( item.getAttribute('index') );
    //     }
    // })

    // 法法2 , for循环  for...in
    // for循环只有一个变量,存储数据是重复赋值
    // 最终调用的是 循环变量的最终数据
    // 点击事件中,必须要使用this  this.getAttribute('index')
    // 如果使用 oLis[i].getAttribute('index') 会报错
    // 

    // for(var i = 0 ; i <= oLis.length-1 ; i++){
    //     oLis[i].onclick = function(){
    //         // 事件中
    //         console.log( this.getAttribute('index') );
    //     }
    // }

    
    // 总结
    // 在循环遍历中,因为 forEach  和  for / for...in
    // 在存储变量上的区别
    // 给伪数组中的标签对象添加事件时

    // 在事件中:  forEach      可以使用 参数1 , 也可以使用this

    //          for/for...in  只能使用this方法,不能使用 伪数组[下标]



    // 问题2:
    //    不使用标签本身定义的属性值,就使用索引下标是不是可行?

    // 咱们现在的demo还比较简单,数据都是我们本地设定的数据
    // 而不是数据库的数据
    // 今后数据库的数据,比较复杂,在标签中定义的也不是索引下标
    // 会是数据库中,数据的一些,其他属性
    // 这个属性与索引下标就没有关系了,就不能使用索引下标替换


    // oLis.forEach(function(item,key){
    //     item.onclick = function(){
    //         // 没有使用标签本身定义的属性的属性值
    //         // 使用的是索引下标
    //         console.log(key+1);
    //     }
    // })

    
    
    // 给同一个标签,添加多个类型相同的事件,
    // 只会执行最后一个事件
    // 原理:后定义的事件会覆盖,先定义的事件
    // 如果非要定义多个类型相同的事件
    // 咱们之后讲

    var oDiv = document.querySelector('div');

    // oDiv.onclick = function(){
    //     console.log('我是第一个点击事件触发的程序');
    // }

    // oDiv.onclick = function(){
    //     console.log('我是第二个点击事件触发的程序');
    // }

    // 之后会详细讲
    oDiv.addEventListener('click' , function(){
        console.log('我是第一个')
    })

    oDiv.addEventListener('click' , function(){
        console.log('我是第二个')
    })