一.事件1
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<li>我是第四个li</li>
<li>我是第五个li</li>
</ul>
<script>
// 通过循环遍历,给标签添加事件/操作
// 1,获取标签对象的集合,也就是数组形式的
var oLis = document.querySelectorAll('li');
console.log(oLis);
// 2,通过 forEach() 等 方式,循环遍历数组中的对象,给这些标签,添加设定/绑定事件
// 定义的第一个形参,存储的是数组的数据对象,也就是li标签
oLis.forEach(function( itme ){
itme.onclick = function(){
// 输出的是相同的内容
console.log(123);
}
})
// 通过循环,每次对一个标签进行操作
// 循环结束,对数组中存储的所有标签,都进行操作
// 给数组中的所有标签都绑定 click 事件
</script>
二.事件2
<ul>
<li>我是第一个标签</li>
<li>我是第二个标签</li>
<li>我是第三个标签</li>
<li>我是第四个标签</li>
<li>我是第五个标签</li>
</ul>
<script>
// 点击第一个li标签标签,输出 1
// 点击第二个li标签标签,输出 2
// 点击第三个li标签标签,输出 3
// 点击第四个li标签标签,输出 4
// 点击第五个li标签标签,输出 5
var oLis = document.querySelectorAll('li');
oLis.forEach(function(item , key){
item.onclick = function(){
// 输出的是标签的索引+1
console.log(key+1);
}
})
for(var i = 0 ; i <= oLis.length-1 ; i++){
// 在绑定事件之前
// 先给所有的标签,定义属性 index 属性值是 循环变量
// 这里定义的属性的属性值,是不会随着程序的执行而改变的
// oLis 是一个伪数组,存储所有li标签
// i是模拟生成的索引下标
// oLis[i]是通过索引下标,获取数组的数据内容,也就是li标签
oLis[i].setAttribute('index' , i);
oLis[i].onclick = function(){
// 在点击事件中,此处所有的循环变量 i ,数值都是5
// 此时输出的内容,不是i,是定义在标签上的index属性的属性值
// 获取index属性的属性值,作为输出的内容
// this,是指向指代的作用,起到替换指定目标,或者指定对象的作用
// 赋值式函数,声明式函数,this指向的是window
// 对象当中的函数,this指向的是这个对象
// 绑定事件时,事件处理函数,this,指向的是绑定这个事件的标签对象
// 此处使用this,来替换 oLis[i] , 因为最终i的值是5
// 必须使用this来指定绑定事件的标签对象 oLis[i] 在点击事件中,无法调用正确的标签对象
// 也就是对应的li标签
// 获取的属性值,是字符串类型,要执行迅运算,需要转化为数值类型
// 方法 parseInt() -0 *1 /1 前面写+
var ind = this.getAttribute('index')-0;
// 输出的是获取到的属性值
// 数值已经转化为数值类型,再来执行 加法操作
console.log(ind+1);
}
}
// for循环和forEach()的区别
// for循环
// 第一次循环建立一个循环变量 i
// 之后每次循环,都是操作的这个循环变量
// 是对一个循环变量,重复赋值
// 不管循环多少次,都只是建立一个变量 i 对这个变量 重复赋值,进行操作
// 操作到最后 只有一个 i 存储最终的数值
// 绑定事件,并且执行
// 执行事件时,for循环已经执行完毕,i的数值是5
// 执行程序,虽然点击的标签不同,但是 i 都是一个变量 最终数值都是5
// 点击标签不同,i 都是相同的5,i + 1都是6
// 点击任意标签,触发的都是 i+1为6 的效果
// 如果要是使用for循环完成效果
// 就要给标签,添加属性,在属性中,存储当前的索引值
// 执行时,再调用这个索引值
// forEach()
// forEach() 定义变量的方式和 for循环不同
// 虽然 变量名称没有改变,但是 每次循环都会创建一个独立不同的变量
// 存储的数值,也是独立的不同的数值,而且相互之间不会影响
// 此时当forEach() 循环结束时,循环几次,就有几个独立的变量,存储每次循环对应的数据内容
// 此时触发事件 每个事件中 变量存储的都是独立的不同的相互不影响的数据数值
