跨瀏覽器的事件對象介紹

複製代碼 代碼如下:
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參數將是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()方法的傳入參數。
　　第四個方法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");
};

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