浅谈JavaScript的事件（事件对象）
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中，会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象，但支持方式不同。
- DOM中的事件对象
兼容dom的浏览会将一个event对象传递到事件处理程序中。
1 var aa=document.getElementById("aa");
2 aa.onclick=function(event){
3 console.log(event.type);
4 }
5 aa.addEventListener("click",function(event){
6 console.log(event.type);
7 },false);上面的代码，通过两种方式指定事件处理程序，但是他们可以获得event对象。event.type都是输出click。
属性/方法 | 类型 | 读/写 | 说明 |
|---|---|---|---|
bubbles | Boolean | 只读 | 事件是否冒泡 |
cancelable | Boolean | 只读 | 是否可以取消事件的默认行为 |
currentTarget | Element | 只读 | 事件处理程序正在处理的那个元素 |
defaultPrevented | Boolean | 只读 | 是否已经调用了preventDefault方法 |
detail | Integer | 只读 | 事件的细节信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段 |
preventDefault() | Function | 只读 | 取消事件的默认行为 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或者冒泡 |
stopPropagation() | Function | 只读 | 取消事件的进一步冒泡或者捕获 |
target | Element | 只读 | 事件的目标 |
trusted | Boolean | 只读 | 为true表示事件是浏览器生成，false表示JavaScript添加 |
type | String | 只读 | 被触发事件的类型 |
view | AbstarctView | 只读 | 与事件关联的抽象视图 |
上面的表格列出了event的属性以及方法，在事件处理程序内部，对象this始终等于currentTarget的值，而target则包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、target和currentTaget包含相同的值。
1 aa.addEventListener("click",function(event){
2 console.log(event.target==this);//true
3 console.log(event.currentTarget==this);//true
4 },false);上面的代码中说明currentTarget、target和this的值是相同的。通过下面的代码，我们可以看出this就是指向元素本身。
1 aa.addEventListener("click",function(event){
2 //console.log(event.target==this);//true
3 //console.log(event.currentTarget==this);//true
4 console.log(this==document.getElementById("aa"));//true
5 console.log(event.currentTarget==document.getElementById("aa"));//true
6 },false);要阻止特定事件的默认行为，可以使用preventDefault方法。例如a标签，在点击的时候，会跳转到指定的url链接，如果想阻止该行为的发生，可以调用preventDefault方法。
1 document.getElementById("hh").onclick=function(event){
2 event.preventDefault();
3 }上面的代码将会阻止跳转事件的发生。只有cancelable为true，才能调用该方法。通过调用stopPropagation方法能够阻止事件的冒泡。
1 document.getElementById("hh").onclick=function(event){
2 console.log(event.eventPhase);//2
3 event.preventDefault();
4 }
5 document.body.onclick=function(event){
6 console.log(event.eventPhase);//3
7 }
8 document.body.addEventListener("click",function(event){
9 console.log(event.eventPhase);//1
10 },true);上面的代码中输出是1,2,3。由此可见，document.body.addEventListener最先执行，它发生在事件的冒泡阶段，document.getElementById("hh")第二个执行，发生在事件的处理程序目标阶段。document.body.onclick发生在事件的冒泡阶段。
- IE中的事件对象
在IE中方式event对象可以通过多种方式，取决于指定事件处理程序的方法。
1 aa.onclick=function(){
2 var event=window.event;
3 console.log(event.type);
4 }上面的代码，我们通过window.event获取了event对象，并且可以取得它的属性和方法。但是如果通过attachEvent添加事件，则事件处理程序会传递一个event对象。
IE的event对象同样包含创建它的相关属性和方法，与DOM事件一样，也会因为事件类型的不同而不同。
属性/方法 | 类型 | 读写 | 说明 |
|---|---|---|---|
cancelBubble | Boolean | 读/写 | 默认false，设置为true，取消事件冒泡 |
returnValue | Boolean | 读/写 | 默认为true，设置为false，取消事件的默认行为 |
srcElement | Element | 只读 | 事件的目标，与target相同 |
因为事件处理程序的指定方式不同，故它的作用域也不相同。最好不用this，可以使用srcElement来获取元素。
如前所述，returnValue属性相当于DOM中的preventDefault方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false，就会阻止默认事件的发生。
1 EventUtil.addEvent(document.getElementById("hh"),"click",function(event){
2 event.returnValue=false;
3 });- 跨浏览器的事件对象
虽然DOM与IE的event对象不同，但是可以通过js库，来解决浏览器的兼容性。
1 var EventUtil={
2 /**
3 * 添加事件
4 * @param {Object} element：元素本身
5 * @param {Object} type：事件名称
6 * @param {Object} fn：事件处理程序
7 */
8 addEvent:function(element,type,fn){
9 if(element.addEventListener){
10 element.addEventListener(type,fn,false);
11 }
12 else if(element.attachEvent){
13 element.attachEvent("on"+type,fn);
14 }
15 else{
16 element["on"+type]=fn;
17 }
18 },
19 /**
20 * 移除事件
21 * @param {Object} element：元素本身
22 * @param {Object} type：事件名称
23 * @param {Object} fn：事件处理程序
24 */
25 removeEvent:function(element,type,fn){
26 if(element.removeEventListener){
27 element.removeEventListener(type,fn,false);
28 }
29 else if(element.detachEvent){
30 element.detachEvent("on"+type,fn);
31 }
32 else{
33 element["on"+type]=null;
34 }
35 },
36 /**
37 * 获取事件对象
38 * @param {Object} event
39 */
40 getEvent:function(event){
41 return event||window.event;
42 },
43 /**
44 * 获取事件处理程序作用的目标元素
45 * @param {Object} event
46 */
47 getTarget:function(event){
48 return event.currentTarget||event.srcElement;
49 },
50 /**
51 * 取消默认行为
52 * @param {Object} event
53 */
54 preventDefault:function(event){
55 if(event.preventDefault){
56 event.preventDefault();
57 }
58 else{
59 event.returnValue=false;
60 }
61 },
62 /**
63 * 取消冒泡
64 * @param {Object} event
65 */
66 stopPropagation:function(event){
67 if(event.stopPropagation){
68 event.stopPropagation();
69 }
70 else{
71 event.cancelBubble=true;
72 }
73 }
74 };上面的代码封装了事件处理中需要的方法，包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。