面向对象，事件

Posted 2021-01-23 zzz035921

面向对象：

1.单例模式

2.工厂模式

3.构造函数

　　（1）类

js天生自带的类

object基类

function··array···number··math···Boolean···date···regexp···string·

1.事件

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

所有的事件都是天生自带的不需要我们去绑定，只需要我们去触发

通过obj事件名=function（）{}

事件名：

onmouseover··onmouseout··onmousedown··onmousemove···onmouseup···onclick···onchang···onfocus···onblur··等等

当用户触发一个事件的时候，浏览器的详细信息都存在一个叫event的对象上我们把它叫做事件对象

所有事件在绑定方法的时候，天生自带一个参数叫event

鼠标的坐标

event.clientx

event.clienty

event的兼容性

在Chrome下event是undefined在ie低版本下是null，狐火下是报错

2事件冒泡

什么叫事件冒泡

当给父子元素的相同事件绑定方法时，触发了子元素身上的事件，执行完毕之后，也会触发父级元素事件，这种传播机制叫事件冒泡

取消事件冒泡

event有个属性叫cancelbubble默认值是false改成true就取消事件冒泡

3.事件捕获

给一个元素绑定事件，普通写法：

obj.onclick=function（）{}这就相当于给obj的onclick属性值附一个道理

obj.onclick=function（）{}

这种写法有一点不好，后者会将前者覆盖掉

事件绑定的第二种写法

标准浏览器用addeventlistener（）这个方法

ie低版本用attachevent（）这个方法

eventlistener（参数1，参数2，参数3）

参数1·是事件名·事件名不能带on

参数2·事件函数

参数3·布尔值，代表捕获或不捕获·默认是flase不捕获但也是冒泡

事件捕获

1.ie低版本没有捕获

2.普通事件绑定写法没有捕获

事件捕获

给父子元素用addeventlistener（）绑定同一个事件时，当触发子元素身上的事件，然后在传递给子元素，这种传播机制叫事件捕获

Attachevent（）和addeventlistener（）二者区别

1. attachevent只用在ie8以下，addeventlistener（）适合标准的。
2. attachevent的事件名带on而addeventlistener事件名不带on