一、变量提升
console.log(a); // undefined
var a = 10;
在JS里不同,如果先使用变量然后在定义,这种情况下会打印undefined,而不是程序报错,这就是JS里的变量提升
var a;
console.log(a);
a = 10;
JS里会把函数和变量的声明提升到最顶部,这样能避免在使用的时候因为变量或者函数不存在而报错,但是JS不会把变量的初始化赋值也进行提升,所以打印的结果是undefined而不是10
var a = 10;
function test(){
console.log(a); // undefined
var a = 20;
console.log(a); // 20
}
test();
这是一个最常见的变量提升的面试题,这个问题混淆的地方在函数外面有个变量和函数内的变量重名,函数调用之后,进入到函数test自己的作用域里,var a会提升到函数的顶部,即使重名,也会重新声明,所以第一次打印的时候结果是undefined,接下来进行赋值,所以第二次打印结果是20,理解变量作用域能帮助理解变量提升,但是函数的提升和变量的提升,有稍微不同的地方
test();
function test(){
alert("111"); // 正常调用
}
test1();
var test1 = function(){
alert("222"); // test1不是一个函数,报错
}
这两种写法区别就是第二个用一个变量接受了函数,从而提升的时候,还是var test1; 这时test1里的内容还是undefined,所以调用函数的时候会出问题,
!!!!变量提升只是把变量声明过程进行了提升,
!!!!函数则会提升函数定义和函数体,所以变量提升更确切讲应该是声明提升
二、事件冒泡
事件冒泡是事件触发和传递过程里常见问题,通过最上一层的元素触发事件,会把事件根据结构进行传递,子传父,直到传到document,如果在这个过程里各级元素也绑定了相同的事件,事件也会触发,比如:
<style type="text/css">
#fa{
width: 200px;
height: 200px;
background: red;
}
#ch{
width: 100px;
height: 100px;
background: blue;
}
</style>
<div id="fa">
<div id="ch">
</div>
</div>
<script type="text/javascript">
var fa = document.getElementById("fa");
var ch = document.getElementById("ch");
ch.onclick = function(){
alert("子元素点击事件触发");
}
fa.onclick = function(){
alert("父元素点击事件触发");
}
document.onclick = function(){
alert("document点击事件触发");
}
</script>
点击蓝色div之后三个点击方法都会触发,这个过程就是事件冒泡,当然了也能阻止事件的传递,有两个方法,event.cancelBubble = true;和event.stopPropagation();,所以要清楚事件传递的顺序
<div id="div1">div
<ul id="ul1">ul
<li id="li1">li
<a href="" id="a1">a</a>
</li>
</ul>
</div>
<script>
var oUl = document.getElementById('ul1'),
oLi = document.getElementById('li1'),
oA = document.getElementById('a1');
// 以下为支持w3c的浏览器 比如chrome firfox等
oUl.addEventListener('click',function (){
alert('ul');
},true);
oLi.addEventListener('click',function (){
alert('li');
},true);
oA.addEventListener('click',function (){
alert('a');
},true);
</script>
跟事件冒泡的顺序相反的叫事件捕获,事件先从document开始触发,最后才触发子元素事件,但是使用onclick这种方式没办法设置,只能通过addEventLinster()完成绑定,要把这个方法里的第三个参数设置成true,但是只有父元素设置成true之后,才能使捕获.
三、事件委托
不是所有的事件冒泡都是不好的,事件委托就是通过冒泡的过程完成事件的触发.当某个元素内有很多子元素,而且子元素都需要触发相同的事件,可以找到子元素,然后循环绑定事件,但是这种方式虽然可以,但是效率非常低,需要把每个元素都绑定上方法,在这个时候可以使用事件委托来完成.
<ul id="ul">
<li>0001</li>
<li>0002</li>
<li>0003</li>
<li>0004</li>
</ul>
var ul1 = document.getElementById("ul1");
ul1.onmouseover = function(){
event.target.style.background = "red";
}
ul1.onmouseout = function(){
event.target.style.background = "";
}
四、面向对象
(未完待续)
