在触发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 };
上面的代码封装了事件处理中需要的方法，包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。
