事件對(duì)象
在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。所有的瀏覽器都支持event對(duì)象，但支持方式不同。
DOM中的事件對(duì)象
兼容DOM的瀏覽器會(huì)將一個(gè)event對(duì)象傳入到事件處理程序中。event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性方法就不一樣。不過(guò)，所有的事件都會(huì)有下表列出的成員。
- bubbles: 返回布爾值，指示事件是否是起泡事件類型。
- cancelable: 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。
- currentTarget: 返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素。
- eventPhase: 返回事件傳播的當(dāng)前階段。
- target: 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。
- type: 返回當(dāng)前 Event 對(duì)象表示的事件的名稱。
- initEvent(): 初始化新創(chuàng)建的 Event 對(duì)象的屬性。
- preventDefault(): 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作。
- stopPropagation(): 不再派發(fā)事件。
this、currentTarget、target
在事件處理程序的內(nèi)部，對(duì)象this始終等于currentTarget的值，而target則只包含事件的實(shí)際目標(biāo)。如果直接將事件處理程序指定給了目標(biāo)元素，則this、currentTarget和target包含相同的值。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert(event.currentTarget === this); //true
alert(event.target === this); //true
}
由于click事件的目標(biāo)是btn按鈕，所以這三個(gè)值是相等的。如果事件處理程序在按鈕的父節(jié)點(diǎn)（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，因?yàn)槭录幚沓绦蚴亲?cè)到這個(gè)元素上的。但是target元素卻等于按鈕元素，因?yàn)樗莄lick事件的真正目標(biāo)。由于按鈕并沒(méi)有注冊(cè)事件處理程序，結(jié)果click事件就冒泡到了document.body，在那里事件才能得到處理。
type
在需要通過(guò)一個(gè)函數(shù)處理多個(gè)事件時(shí)，可以使用type屬性。如：
var btn = document.getElementById('btn');
//設(shè)置多個(gè)事件
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;
}
}
}
//給響應(yīng)的事件賦值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
這里通過(guò)event.type屬性，讓函數(shù)能夠確定發(fā)生了什么事件，并執(zhí)行相應(yīng)的操作。
preventDefault()
要阻止特定事件的默認(rèn)行為，可以使用該方法。如：
var link = document.getElementById('link');
link.onclick = function(event){
event.preventDefault();
}
只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來(lái)取消其默認(rèn)行為。
stopPropagation()
stopPropagation()用于立即停止事件在DOM層次中的傳播，即取消進(jìn)一步的事件捕獲或冒泡。例如，直接添加到一個(gè)按鈕的事件處理程序可以調(diào)用該方法，從而避免觸發(fā)注冊(cè)在document.body上面的事件處理程序。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert('click button');
event.stopPropagation();
}
document.body.onclick = function(event){
alert('click body');
}
//點(diǎn)擊一下的結(jié)果是：
//click button
eventPhase
該屬性用來(lái)確定事件當(dāng)前正位于事件流的哪個(gè)階段。
- 如果是捕獲階段則等于1；
- 如果是目標(biāo)對(duì)象階段則等于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);
}
//點(diǎn)擊一下的結(jié)果是：
//1
//2
//3
只有在事件處理程序執(zhí)行期間，event對(duì)象才會(huì)存在；一旦事件處理程序執(zhí)行完成，event對(duì)象就會(huì)被銷毀。
IE中的事件對(duì)象
與訪問(wèn)的DOM中的event對(duì)象不同，邀訪問(wèn)IE中的event對(duì)象有幾種不同的方式，取決于指定事件處理程序的方法。
DOM0級(jí)方法
在使用DOM0級(jí)方法添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在。如：
var btn = document.getElementById('btn');
btn.onclick = function(){
//獲取event對(duì)象
var event = window.event;
alert(event.type); //'click"
}
IE事件處理程序
如果事件處理程序時(shí)使用attachEvent()添加的，那么就會(huì)有一個(gè)event對(duì)象作為參數(shù)被傳入事件處理程序中。如下：
var btn = document.getElementById('btn');
btn.attachEvent("onclick",function(event){
alert(event.type);
})
HTML特性
通過(guò)HTML特性指定的事件處理程序，可以通過(guò)一個(gè)叫event的變量來(lái)訪問(wèn)event對(duì)象。如：
<button type="button" id="btn" onclick="alert(event.type)">click me</button>
event對(duì)象也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性方法就不一樣。不過(guò)，所有的事件都會(huì)有下表列出的成員。
- cancelable: 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。
- returnValue：取消事件的默認(rèn)行為
- srcElement：事件的目標(biāo)
- type: 返回當(dāng)前 Event 對(duì)象表示的事件的名稱。
srcElement
因?yàn)槭录幚沓绦虻淖饔糜蚴歉鶕?jù)指定它的方式來(lái)確定的，所以不能認(rèn)為this會(huì)始終等于事件目標(biāo)。故而，最好還是使用event.srcElement比較保險(xiǎn)。比如：
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想當(dāng)與DOM中的 preventDefault()方法，它們的作用都是取消給定事件的默認(rèn)事件。只要將returnValue設(shè)置為false，就可以阻止默認(rèn)行為。
var link = document.getElementById('link');
link.onclick = function(event){
window.event.returnValue = false;
}
與DOM不同的是，在此沒(méi)辦法確定事件是否被取消。
cancelBubble
cancelBubble屬性和DOM中的stopPropagation()方法相同，都是用來(lái)停止事件冒泡的。由于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');
}
//點(diǎn)擊一下的結(jié)果是：
//‘click button
跨瀏覽器的事件對(duì)象
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);
}
}
