<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('我是第二个')
})
JS18-解决案例中this、for、for...in的问题
猜你喜欢
转载自blog.csdn.net/DcTbnk/article/details/105268643
今日推荐
周排行