DOM冒泡事件

一、注册事件的三种方式

1 on的方式

语法：

事件源.on+事件名称 = 事件处理程序

例如：

btn.onclick = function(){}

细节：

只能注册一个事件处理函数

兼容：

所有主流浏览器都兼容

2   addEventListener

语法：

事件源.addEventListener(事件名称,事件处理程序，在哪个阶段执行)

例如：

btn.addEventListener(“click”,function (){},false)

细节：

事件名称不能带有on

可以为事件绑定多个处理程序

在事件处理函数中，this是对应的事件源

兼容：

ie8不支持

3   attachEvent

语法：

事件源.attachEvent(on+事件名称，事件处理程序)

例如：

btn.attachEvent(“onclick”,function(){})

细节：

也可以注册多个事件

注册的事件要带上on

在事件处理函数中，this是window

兼容

ie6到ie10支持，其余都不支持

4   注册事件的兼容写法

原理：

判断当前浏览器支持谁，支持哪个就用哪个来注册

function addListener(element,event,fn){

if (element.attachEvent){

element.attachEvent(“on”+event,fn)

}else if(element.addEventListener) {

element.addEventListener(event,fn,false)

}else {

element["on"+event] = fn;

}

}

二、移除事件绑定的处理程序

1 on的方式

方法：

事件源.on+事件名 = null;

2   removeEventListener

语法：

事件源.removeEventListener(事件名,处理程序,在哪个阶段)

例子：

btn.removeEventListener(“click”,clickHandel,false)

细节：

如果你在不同的阶段分别绑定了两个函数，要分开移除

移除的是使用addEventListener绑定的处理程序

兼容：

ie8不支持

3   detachEvent

语法：

事件源.detachEvent(on+事件名,处理程序)

例子：

btn.detachEvent(“onclick”,clickHandle)

细节：

移除的是使用attachEvent绑定的处理程序

兼容：

ie6-ie10支持，其余不支持

三、事件的三个阶段

事件的三个阶段分为：事件捕获阶段、事件目标阶段、事件冒泡阶段

要知道事件的阶段，需要通过一个属性： event.eventPhase

当eventPhase的值为1的时候，是事件捕获阶段，为2的时候是事件的目标阶段，为3的时候是冒泡阶段

事件在出现的时候

只会包含两个阶段：

a)    捕获和目标

b)    冒泡和目标

冒泡和捕获不会同时出现

三个阶段的异同：

事件在触发的时候，是有一个过程的

事件冒泡：后代元素触发某一个类型的事件，同时这个元素会传递到前代元素，并且触发前代元素的同类事件

事件捕获：发生某种类型的事件的时候，先有捕获的过程，先从前代元素递到触发事件的事件源子元素

事件目标阶段：事件触发到达事件源的时候

阻止冒泡

StopPropagation（）；//IE8不支持

CancelBubble=true；

On+eventType  相应的解绑方式：事件源.eventType=null；

AddEventListener  相应的解绑方式：事件源.removeEventListener（type，已经绑定的处理程序的函数名，对应的阶段）；

以匿名函数的时候绑定的，是无法解绑的

如果绑定的时候，执行处理程序的阶段不同（第三个参数的true和false不同），在解绑的时候，也必须使用相应的触发阶段才能成功解绑，简而言之，如果是绑定的时候是false，解绑的时候也必须是false

解绑的时候只会解绑相同的函数名，如果不同就不会解绑，同名的函数重复绑定无效

attachEvent   相应的解绑方式：事件源.detachEvent（“on”+type，对应的绑定的函数名）；、如果是以匿名函数的方式，也是无法解绑

每次解绑，函数名必须相同，否则不会解绑

总结：是用什么方式绑定事件处理程序，就必须使用相应的解绑方式解绑

四、事件的类型

得知事件的类型也是通过事件的一个属性获得

event.type

得到的是不带on的事件名称

利用这个属性，我们可以实现给一个元素注册多个事件，却调用同一个函数