跨瀏覽器的事件對象介紹

更新時間：2012年06月27日 10:36:58 作者：

雖然IE的事件對象與DOM的事件對象存在差異，但是IE事件對象中所包含的信息和能力，與DOM事件對象是相同的，只是表現(xiàn)形式不同而已，通過映射的方式，我們可以實現(xiàn)兼容IE和DOM事件對象的事件對象

 
var eventUtil = { 
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; 
} 
}; 
stopPropagation : function(event){ 
if(event.stopPropagation){ 
event.stopPropagation(); 
}else{ 
event.cancelBubble = true; 
} 
}; 
}; 

　　當使用一個DOM兼容的瀏覽器時，event 變量僅僅是傳入并被返回，在IE中event參數(shù)將是undefined ，因此window.event將會被返回，所以采用eventUtil.getEvent()方法無論在dom還是IE上event返回值都是可用的。
　　同理第二個方法，getTarge()方法，先檢測event對象的target屬性，如果存在，則返回targe，若為IE瀏覽器則返回srcElement屬性。保證兼容性。

復制代碼代碼如下:

 
btn.onclick = function(event){ 
event = EventUtil.getEvent(event); 
var target = EventUtil.getTarget(event); 
}; 

　　第三個方法，preventDefault ()方法，當event對象傳入時，先檢測event對象的preventDefault()方法是否可用，若可用則調用preventDefault方法，若不可用將event的returnValue 設置為false。
　　例如：
　　

復制代碼代碼如下:

 
var link = document.getElementById("myLink"); 
link.onclick = function(event){ 
event = EventUtil.getEvent(event); 
EventUtil.preventDefault(event); 
}; 

　　這段代碼阻止了一個link標簽的默認行為，event對象來自于EventUtil的getEvent方法的返回值并作為preventDefault()方法的傳入?yún)?shù)。
　　第四個方法stopPropagation(),用同樣的方法，首先嘗試DOM方法，之后嘗試cancelBubble屬性，例如下面的代碼：

復制代碼代碼如下:

 
var btn = document.getElementById("myBtn"); 
btn.onclick = function(event){ 
alert("Clicked"); 
event = EventUtil.getEvent(event); 
EventUtil.stopPropagation(event); 
}; 
document.body.onclick = function(event){ 
alert("Body clicked"); 
}; 

記得這個方法可能阻止事件在瀏覽器的冒泡階段或者同時阻止事件在瀏覽器的冒泡和捕獲階段。

您可能感興趣的文章: