__ 一、事件冒泡和事件捕获__
- 事件冒泡
事件冒泡就是从HTML中具体的一个元素，沿着DOM树，向父级冒泡，直到document。
demo验证
<body>
<div class="one">one
<div class="two">two
<div class="three">three</div>
</div>
</div>
<script type="text/javascript">
var one=document.getElementsByClassName("one")[0];
var two=document.getElementsByClassName("two")[0];
var three=document.getElementsByClassName("three")[0];
var html=document.getElementsByTagName("html")[0];
var test=false;
one.addEventListener('click',function(){
console.log("one");
},test);
two.addEventListener('click',function(){
console.log("two");
},test);
three.addEventListener('click',function(){
console.log("three");
},test);
document.body.addEventListener('click',function(){
console.log("body");
},test);
html.addEventListener('click',function(){
console.log("html");
},test);
document.addEventListener('click',function(){
console.log("document");
},test);
</script>
</body>
点击three，控制台结果：
three
two
one
body
html
document
IE5.5及更早版本事件冒泡会跳过html元素，从body直接到document。
- 事件捕获
事件捕获是与事件冒泡相反的过程，沿着DOM树，事件最先触发最顶级的元素，依次向下到最底层的元素。
把代码中的test=true，再次点击three，控制台结果：
document
html
body
one
two
three
支持的浏览器：IE9，Safari，Chrome，OPera，FireFox
由于老版本浏览器不支持，因此很少使用事件捕获，书中也建议我们使用事件冒泡。
__ 二、事件处理程序 __
事件处理程序有三种
1、是在HTML中嵌入事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
添加事件：addEventListener(type,function,Boolean)
移除事件：removeEventListener(type,function,Boolean)
type：事件类型，function：事件执行的函数，Boolean：true事件捕获，false事件冒泡。
支持的浏览器：IE9、FireFox，Safari，Chrome，OPera
4、IE事件处理程序
添加事件：attachEvent(type,function)
移除事件：detachEvent(type,function)
IE8-只支持事件冒泡，通过此方法的事件都会添加到冒泡阶段。
三、事件对象
在触发DOM上的某个事件时，会产生一个事件对象event。
- DOM事件对象：
兼容的DOM会将一个event对象传入到事件处理程序中，无论指定事件处理成程序时使用什么方法（Dom0级、DOM2级），都会传入event对象。
| 属性/ 方法 | 类型 | 读/写 | 说明 |
|---|---|---|---|
| bubbles | Boolean | 只读 | 表明事件是否冒泡 |
| cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
| currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
| defaultPrevented | Boolean | 只读 | 为true表明已经调用了preventDefault()方法 |
| detail | Integer | 只读 | 与事件相关的细节信息 |
| eventPhase | Integer | 只读 | 调用事件处理程序的阶段，1捕获阶段，2处于目标阶段，3冒泡阶段 |
| preventDefault() | Function | 只读 | 取消事件的默认行为，如果cancelable为true，则可以使用 |
| stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用 |
| stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法 |
| target | Element | 只读 | 事件的目标 |
| trusted | Blooean | 只读 | 为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的 |
| type | String | 只读 | 被触发的事件的类型 |
| view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
- IE中的事件对象
在使用DOM0级方法添加事件处理程序时，event作为window对象的一个属性event=window.event
如果事件处理程序是使用attachEvent()添加的，那么就会有一个event作为参数传入事件处理程序函数中。
| 属性/ 方法 | 类型 | 读/写 | 说明 |
|---|---|---|---|
| cancelBubble | Blooean | 读/写 | 默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同 |
| returnvalue | Blooean | 读/写 | 默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同 |
| srcElement | Element | 只读 | 事件的目标，与DOM中的target属性相同 |
| type | String | 只读 | 被触发的事件类型 |
四、跨浏览器的事件处理程序以及事件对象
/**
跨浏览器事件处理程序
*/
var EventUtil={
//事件处理程序
addHandler:function(element,typo,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//Dom2级事件监听
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);//IE事件处理程序
}else{
element["on"+type]=handler;//DOM0级事件处理程序
}
},
removeHandler:function(element,typo,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
//事件对象
getEvent:function(event){
return event ? event||window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
}
由于IE9以前不支持事件捕获，因此stopPropagation()只能用来阻止事件冒泡。
简要的笔记，先记到这里，后面再继续深入学习各种事件类型，加油！！！
