javacript part2

this指向

1.在函数中this指向window
2.在定时器中this，也指向window
3.对象的this指向对象本身
4.事件中this指向点击的元素
5.在类中this指向实例化对象
6.箭头函数中，this指向父作用域

改编this指向的三种方式

• call()

function a(a,b){
    console.log(this,a,b)
}
obj = {
    name: 'tom'
}
a.call(obj,'1','2')
//输出{name: "tom"} "1" "2"

• apply()

function a(a,b){
    console.log(this,a,b)
}
obj = {
    name: 'tom'
}
a.apply(obj,['1','2'])
//输出{name: "tom"} "1" "2"

• bind()

function a(a,b){
    console.log(this,a,b)
}
obj = {
    name: 'tom'
}
a.bind(obj,'1','2');
//bind不会调用需要手动调用
a.bind(obj,'1','2')();
//输出{name: "tom"} "1" "2"

事件

js的事件模型分为两种，冒泡和捕获
addEventListener()方法，false为冒泡，true为捕获

• 冒泡
  触发子元素时，从内向外冒泡
• 捕获
  触发子元素时，从外向内捕获

需要特别强调的一点是
w3c规定，任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。绑定在被点击元素的事件是按照代码的顺序发生的。
如果要实现先冒泡再捕获，则需要绑定两个addEventListener，并且调整代码的顺序把冒泡放在捕获前面

//div1是div2的父元素
div1.addEventListener("click",function(){
alert("div1_冒泡");
},false);
div2.addEventListener("click",function(){
alert("div2_冒泡");
},false);
div2.addEventListener("click",function(){
alert("div2_捕获");
},true);
执行顺序为：div2_冒泡==>div2_捕获==>div1_冒泡

事件三要素

事件，事件源，事件处理函数
通俗来讲就是

事件：如何触发这个事件，比如按下开关
事件源：要触发的对象，比如电灯的开关
事件处理函数：发生了什么事情，比如灯亮了

oDiv.onclick = function(e){
      e.target//事件源，由谁引发的事件，谁就是事件源
      console.log(this);//谁的事件，this就指向谁
      console.log(e.currentTarget)//this
}

阻止冒泡
e.stopPropagation();
阻止默认行为
e.preventDefault();

兼容ie分别为
阻止冒泡，IE则是使用e.cancelBubble = true
阻止默认行为，IE则是使用e.returnValue = false;
2020年了请不要再考虑兼容ie浏览器了！秋梨膏！！
还有一种阻止默认行为的方法

我们可以直接使用return false
值得一提的是该方法总在jquery中既阻止默认行为，又阻止冒泡

//下面这个使用原生js，只会阻止默认行为，不会停止冒泡
<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

//使用jquery，既阻止默认行为又停止冒泡
<div id='div'  onclick='alert("div");'>
<ul  onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

关于事件委托

解决后生成元素的事件绑定问题
解决方式，利用事件委托把事件绑定在父元素上
通过事件冒泡，会触发父元素的点击事件，再通过e.target判断，事件是否由我们想要的事件源触发
jquery中的事件委托

$('ul').on('click','li',function(){
      
})

闭包

闭包是指外部函数里声明内部函数，内部函数引用外部函数里的局部变量，这样当外部函数调用完毕以后，局部变量不被释放可以一直使用