从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）

一、复习

面向对象

1）单例模式

2）工厂模式

3）构造函数

①类
js天生自带的类 基类object function array number math boolean date regexp string

二、事件    浏览器客户端上客户触发的行为都称为事件

所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发
通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法

事件名:onmouseover
onmouseout onmousedown onmousemove onmouseup

Onclick  onchange
onfocus onblur 等等

当用户触发一个事件时，浏览器的所有详细信息都存在一个叫event的对象上。

我们把他叫事件对象

三、事件对象 event

1.event兼容性：

在Chrome下event是undefined 在ie低版本下是null   分支持event和不支持event  支持event就直接widnow.event  不支持把e在赋值给事件中声明的变量

2.写法：

document.onclick=function（e）{var e = e || window.event}

四、事件冒泡

1.什么是事件冒泡

当给父子元素的同一事件绑定时 触发了子元素身上的事件 执行完毕之后 也会触发父级元素的相同事件

这种传播叫事件冒泡

2.解决冒泡

event对象有个属性叫cancelBubble 默认值是false 改成true就取消当前事件冒泡

五、事件捕获

1.事件写法：

①第一种写法：obj.onclick=function（）{ }这就相当于给obj的onclick属性赋值是一个道理
↑↑↑这种写法有一点不好 给元素绑定同一个事件的时候 后者会把前者覆盖掉
②第二种写法：
标准浏览器用：addEventListener()这个方法
addEventListener(参数1,参数2,参数3)
参数 1 是事件名 事件名不带on
参数 2 是事件函数
参数 3 布尔值 默认值是false false改成true那么冒泡模型直接变成捕获模型
③id低版本用：attachEvent()这个方法

2.捕获知识点

①ie低版本没有捕获
②普通事件绑定写法没有捕获

3.什么是事件捕获

给父子元素用addEventListener( )绑定同一个事件时 当触发子元素身上的事件 会先触发父元素身上的事件

六、attachEvent（）与  addEventListener（）二者的区别

1.attachEvent 只用在ie8以下 addEventListener 只用在标准浏览器
2.attachEvent 事件名带on 后者不带on
3.attachEvent 函数里的this是window 而后者函数里面的this是当前元素对象
4.attachEvent 只有冒泡没有捕获 而后者有冒泡也有捕获

七、call( ) 和 apply( )

call 和 apply就是改变 函数 里面的this指向的方法
1.使用
xxx.call（） xxx.apply（） 特别强调xxx必须是函数（普通函数，类，构造函数）

2.注意
①call( )中的第一个参数是null的时候 函数里的this还是指向原来的 不变
②所有事件都是异步的