事件對象
在觸發(fā)DOM上的某個事件時批销，會產(chǎn)生一個事件對象event押蚤，這個對象中包含著所有與事件有關(guān)的信息。包括導致事件的元素震叙、事件的類型以及其他與特定事件相關(guān)的信息掀鹅。所有的瀏覽器都支持event對象，但支持方式不同捐友。
DOM中的事件對象
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中淫半。event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣匣砖，可用的屬性方法就不一樣科吭。不過昏滴，所有的事件都會有下表列出的成員。
- bubbles: 返回布爾值对人，指示事件是否是起泡事件類型谣殊。
- cancelable: 返回布爾值，指示事件是否可擁可取消的默認動作牺弄。
- currentTarget: 返回其事件監(jiān)聽器觸發(fā)該事件的元素姻几。
- eventPhase: 返回事件傳播的當前階段。
- target: 返回觸發(fā)此事件的元素（事件的目標節(jié)點）势告。
- type: 返回當前 Event 對象表示的事件的名稱蛇捌。
- initEvent(): 初始化新創(chuàng)建的 Event 對象的屬性。
- preventDefault(): 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作咱台。
- stopPropagation(): 不再派發(fā)事件络拌。
this、currentTarget回溺、target
在事件處理程序的內(nèi)部春贸，對象this始終等于currentTarget的值，而target則只包含事件的實際目標遗遵。如果直接將事件處理程序指定給了目標元素萍恕，則this、currentTarget和target包含相同的值车要。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert(event.currentTarget === this); //true
alert(event.target === this); //true
}
由于click事件的目標是btn按鈕允粤，所以這三個值是相等的。如果事件處理程序在按鈕的父節(jié)點（document.body）中屯蹦，那么這些值則不相同维哈。如：
var body = document.body;
body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById('btn')); //true
}
在這里，this和currentTarget都是document.body登澜，因為事件處理程序是注冊到這個元素上的阔挠。但是target元素卻等于按鈕元素，因為它是click事件的真正目標脑蠕。由于按鈕并沒有注冊事件處理程序购撼，結(jié)果click事件就冒泡到了document.body，在那里事件才能得到處理谴仙。
type
在需要通過一個函數(shù)處理多個事件時迂求，可以使用type屬性。如：
var btn = document.getElementById('btn');
//設(shè)置多個事件
var handler = function(event){
//獲取事件的類型
switch(event.type){
case 'click':{
alert('click');
break;
}
case 'mouseover':{
event.target.style.backgroundColor = 'green';
break;
}
case 'mouseout':{
event.target.style.backgroundColor = 'gray';
break;
}
}
}
//給響應的事件賦值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
這里通過event.type屬性晃跺，讓函數(shù)能夠確定發(fā)生了什么事件揩局，并執(zhí)行相應的操作。
preventDefault()
要阻止特定事件的默認行為掀虎，可以使用該方法凌盯。如：
var link = document.getElementById('link');
link.onclick = function(event){
event.preventDefault();
}
只有cancelable屬性設(shè)置為true的事件付枫，才可以使用preventDefault()來取消其默認行為。
stopPropagation()
stopPropagation()用于立即停止事件在DOM層次中的傳播驰怎，即取消進一步的事件捕獲或冒泡阐滩。例如，直接添加到一個按鈕的事件處理程序可以調(diào)用該方法县忌，從而避免觸發(fā)注冊在document.body上面的事件處理程序掂榔。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert('click button');
event.stopPropagation();
}
document.body.onclick = function(event){
alert('click body');
}
//點擊一下的結(jié)果是：
//click button
eventPhase
該屬性用來確定事件當前正位于事件流的哪個階段。
- 如果是捕獲階段則等于1症杏；
- 如果是目標對象階段則等于2装获；
- 如果是冒泡階段則等于3；
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert(event.eventPhase);
}
document.body.addEventListener('click',function(event){
alert(event.eventPhase);
},true)
document.body.onclick = function(event){
alert(event.eventPhase);
}
//點擊一下的結(jié)果是：
//1
//2
//3
只有在事件處理程序執(zhí)行期間厉颤，event對象才會存在饱溢；一旦事件處理程序執(zhí)行完成，event對象就會被銷毀走芋。
IE中的事件對象
與訪問的DOM中的event對象不同，邀訪問IE中的event對象有幾種不同的方式潘鲫，取決于指定事件處理程序的方法翁逞。
DOM0級方法
在使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在溉仑。如：
var btn = document.getElementById('btn');
btn.onclick = function(){
//獲取event對象
var event = window.event;
alert(event.type); //'click"
}
IE事件處理程序
如果事件處理程序時使用attachEvent()添加的挖函，那么就會有一個event對象作為參數(shù)被傳入事件處理程序中。如下：
var btn = document.getElementById('btn');
btn.attachEvent("onclick",function(event){
alert(event.type);
})
HTML特性
通過HTML特性指定的事件處理程序浊竟，可以通過一個叫event的變量來訪問event對象怨喘。如：
<button type="button" id="btn" onclick="alert(event.type)">click me</button>
event對象也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。觸發(fā)的事件類型不一樣振定，可用的屬性方法就不一樣必怜。不過，所有的事件都會有下表列出的成員后频。
- cancelable: 返回布爾值梳庆，指示事件是否可擁可取消的默認動作。
- returnValue：取消事件的默認行為
- srcElement：事件的目標
- type: 返回當前 Event 對象表示的事件的名稱卑惜。
srcElement
因為事件處理程序的作用域是根據(jù)指定它的方式來確定的膏执，所以不能認為this會始終等于事件目標。故而露久，最好還是使用event.srcElement比較保險更米。比如：
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(window.event.srcElement === this) //true
}
btn.attactEvent('onclick',function(event){
alert(event.srcElement === this); //false
})
returnValue
returnValue想當與DOM中的 preventDefault()方法，它們的作用都是取消給定事件的默認事件毫痕。只要將returnValue設(shè)置為false征峦，就可以阻止默認行為迟几。
var link = document.getElementById('link');
link.onclick = function(event){
window.event.returnValue = false;
}
與DOM不同的是，在此沒辦法確定事件是否被取消眶痰。
cancelBubble
cancelBubble屬性和DOM中的stopPropagation()方法相同瘤旨，都是用來停止事件冒泡的。由于IE不支持事件捕獲竖伯，因此只能取消冒泡事件存哲。
ar btn = document.getElementById('btn');
btn.onclick = function(event){
alert('click button');
window.event.cancelBubble = true;
}
document.body.onclick = function(event){
alert('click body');
}
//點擊一下的結(jié)果是：
//‘click button
跨瀏覽器的事件對象
window.onload = function(){
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if(element.addEvent){
element.attachEvent('on'+type,handler,false)
}else{
element['on'+type] = handler;
}
},
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;
}
},
removeHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,handler,false)
}else if(element.addEvent){
element.detachEvent('on'+type,handler,false)
}else{
element['on'+type] = null;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
}
var btn = document.getElementById('btn');
btn.onclick = function(event){
event = EventUtil.getEvent(event);
alert(event);
}
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
alert(target);
}
}
