一、事件
二、事件流
以上内容见：javaScript事件（一）事件流
三、事件处理程序
四、IE事件处理程序
五、事件对象
以上内容见javaScript事件（三）事件对象
六、事件对象的公共成员
1、DOM中的event的公共成员
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是，DOM中所有事件都有以下公共成员。
| 属性/方法 | 类型 | 读/写 | 说明 |
| bubbles | Boolean | 只读 | 表明事件是否冒泡 |
| stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法 |
| stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增） |
| cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
| preventDefault() | Function | 只读 | 取消事件的默认行为。如果cancelable是true，则可以使用这个方法 |
| defaultPrevented | Boolean | 只读 | 为true表示已经调用了preventDefault()(DOM3级事件中新增) |
| currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素（currentTarget始终===this,即处理事件的元素） |
| target | Element | 只读 | 直接事件目标，真正触发事件的目标 |
| detail | Integer | 只读 | 与事件相关的细节信息 |
| eventPhase | Integer | 只读 | 调用事件处理程序的阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段 |
| trusted | Boolean | 只读 | 为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的（DOM3级事件中新增） |
| type | String | 只读 | 被触发的事件的类型 |
| view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
1 | 1 |
a、对比currentTarget和target
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只是包含事件的实际目标。
举例：页面有个按钮，在body（按钮的父节点）中注册click事件，点按钮时click事件会冒泡到body进行处理。
2
3
4
5
6
7
8
9
10
11
12
2<input id="btn" type="button" value="click"/>
3<script>
4 document.body.onclick=function(event){
5 console.log("body中注册的click事件");
6 console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
7 console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
8 console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
9 }
10</script>
11</body>
12
b、通过type属性，可以在一个函数中处理多个事件。
原理：通过检测event.type属性，对不同事件进行不同处理。
举例：定义一个handler函数用来处理3种事件：click,mouseover,mouseout。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2<input id="btn" type="button" value="click"/>
3<script>
4var handler=function(event){
5 switch (event.type){
6 case "click":
7 alert("clicked");
8 break;
9 case "mouseover":
10 event.target.style.backgroundColor="pink";
11 break;
12 case "mouseout":
13 event.target.style.backgroundColor="";
14 }
15};
16 var btn=document.getElementById("btn");
17 btn.onclick=handler;
18 btn.onmouseover=handler;
19 btn.onmouseout=handler;
20</script>
21</body>
22
运行效果：点击按钮，弹出框。鼠标经过按钮，按钮背景色变为粉色；鼠标离开按钮，背景色恢复默认。
c、stopPropagation()和stopImmediatePropagation()对比
同：stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。
异：二者的区别在于当一个事件有多个事件处理程序时，stopImmediatePropagation()可以阻止之后事件处理程序被调用。
d、eventPhase
eventPhase值在捕获阶段为1，处于目标阶段为2，冒泡阶段为3。
2、IE中event的公共成员
IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同，但是也有一些是所有对象都有的公共成员，且这些成员大部分有对应的DOM属性或方法。
| 属性/方法 | 类型 | 读/写 | 说明 |
| cancelBubble | Boolean | 读/写 | 默认为false,但将其设置为true就可以取消事件冒泡（与DOM中stopPropagation()方法的作用相同） |
| returnValue | Boolean | 读/写 | 默认为true，但将其设置为false就可以取消事件的默认行为（与DOM中的preventDefault()方法的作用相同） |
| srcElement | Element | 只读 | 事件的目标（与DOM中的target属性相同） |
| type | String | 只读 | 被触发的事件的类型 |
1 | 1 |
