总结一些昨天考核的问题
1.事件监听事件绑定的区别
除了onclick事件会被覆盖,addEventListener可以添加多个事件外,onclick事件执行最后一个绑定的onclick事件
除此之外
1.添加事件监听可以对动态生成的元素(未来元素生效),普通事件不可以
2.普通事件只能执行一个回调函数,监听时间可以添加几个(可以绑定多个相同的事件)
3.家庭可以改变事件的传播方式冒泡或捕捉,而事件绑定只有捕捉
4.在删除事件上,,事件监听有删除方法,而普通事件监听只能通过设为null删除
在搜这些问题的时候还了解到有一个attachEvent事件
<button id="btn">zyj</button>
<script>
btn.addEventListener("click",function(){
alert("我是被监听的zyj");
},false);
btn.attachEvent("onclick",function(){
alert("我是被监听的zyj");
})
</script>
两者之间也有一定的区别:
(1)
addEventListener( ) :当事件被触发时,响应函数将会按照函数的绑定顺序执行
attachEvent( ): 当事件被触发时,响应函数将会按照与函数绑定顺序相反的顺序执行(与addEventListener相反)
addEventListener( )就是按照代码顺寻从上往下一次绑定的的循序执行
但是attachEvent( )就是从做后绑定的一个事件往上执行
(2)支持的浏览器
addEventLister在DOM2的浏览器中使用,如Firefor、Chrome等。
attachEvent为IE所用。
(3)处理程序执行阶段
addEventLister的第三个参数为true时,在捕获阶段执行;为false时,在冒泡阶段执行。
attachEvent均在冒泡阶段执行。
(4)作用域
addEventLister的作用域为元素作用域,this为element引用。
就是this指向绑定事件的元素
attachEvent的作用域为全局作用域,this为window引用。
this指向窗口
2.多次的点击数据加载不出来的原因
3.关于在for循环中let和var的区别
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
})
};
for中定义var的话输出的的每次就是遍历后最后一个数字5
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
})
};
用let就是输出的01234;
在考核的时候只知道有这个情况,因为写代码的时候遇见过,但是没有深入去了解
原因
let 和var的主要区别就是
let是块级作用域
var是全局作用域
let不可以变量提升
var可以变量提升
在var里面:
setTimeout是异步执⾏,10ms后往任务队列⾥⾯添加⼀个任务,只有主线线上的全部执⾏完,才会执⾏任务队列⾥的任务,当主线执⾏完成后,i是5,所以此时再去执⾏任务队列⾥的任务时,i全部是5了。对于打印5次是:
每⼀次for循环的时候,settimeout都执⾏⼀次,但是⾥⾯的函数没有被执⾏,⽽是被放到了任务队列⾥⾯,等待执⾏,for循环了5次,就放了5次,当主线程执行完成后,才进入任务队列里面执行。
在let里面:
因为for循环头部的let不仅将i绑定到for循环中,事实上它将其重新绑定到循环体的每一次迭代中,确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域,通过var定义的变量是无法传入到这个函数执行域中的,通过使用let来声明块变量能作用于这个块,所以function就能使用i这个变量了。
所以我们在利用for循环来给所有元素绑定事件时如果用的var只有最后一个和元素会被添加上事件,但是用let都可以进行添加了
还需要注意的是
由于var可以进变量提升,var命令实际只会执行一次,而let命令不存在变量提升,所以每次循环都会执行一次,声明一个新变量(它值不同),for的每次循环都是不同的块级作用域,let声明的变量也是块级作用域,所以也不存在重复声明的问题,let声明变量的for循环里,每个匿名函数实际上引用的都是一个新的变量。
当然,如果要使用var当做循环循环头的话,出现循环后打印出的结果一模一样的问题,可以使用闭包来解决。
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function timer() {
console.log(i);
});
})(i);
}
总结:就是在写代码中遇到了问题一定要及时去想查一下了解一下原因,不然可能就忘了,应该要知道问腿的原因,不能只为了解决而解决,
还有就是学习到新知识就要用上这次写代码,很少用到新学的es6