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的事件名称
利用这个属性，我们可以实现给一个元素注册多个事件，却调用同一个函数
