雖然DOM和IE中的event對象不同,但基于他們之間相似依舊可以拿出跨瀏覽器方案來。
var EventUtil = {
addHandler: 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(ele,type,handler){
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
以上代碼顯示,我們?yōu)镋ventUtil添加了4個新的方法。第一個是getEvent(),它返回的是event對象的引用。考慮到IE重實踐對象的位置不同,可以使用這個方法來取得event對象,而不必擔心指定事件處理程序的方式。在使用這個方法時,必須假設有一個事件對象傳入到時間處理程序中,而且把該變量傳給這個方法,如下所示。
btn.onclick = function(event){
event = EventUtil.getEvent(event);
}
在兼容DOM的瀏覽器中。event變量只是簡單的傳入和傳回。而在IE中event參數(shù)是未定義的(undefined),因此就會返回window.event。將這一行代碼添加到事件處理程序的開頭,就可以確保隨時都能使用event對象,而不必擔心用戶使用的是什么瀏覽器。
第二個方法時getTarget(),他返回的是事件目標。在這個方法內部,會檢測event對象的target屬性,如果存在返回該屬性的值,否則,返回srcElement屬性的值??梢韵裣旅孢@樣使用這個方法。
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
}
第三個方法是preventDefault(),用于取消事件的默認行為。在傳入event對象后,這個方法會檢查是否存在preventDefault()方法,如果存在調用該方法。如果preventDefault()方法不存在,則將returnValue設置為false。下面是這個方法的例子。
var link = document.getElementById("myLink");
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
以上代碼可以確保在所有瀏覽器中單擊該鏈接都不會打開另一個頁面。首先,使用EventUtil.getEvent()取得event對象,然后將其傳入EventUtil.preventDefault()以取消默認行為。
第四個方法是stopPropagation(),其實現(xiàn)方式類似。首先嘗試使用DOM方法阻止事件流,否則就是用cancelBubble屬性。下面看一個例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert("Click");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
alert("Body Click");
};
再次,首先使用EventUtil.getEvent()取得了event對象,然后將其傳入到EventUtil.stopPropagation()。別忘了由于IE不支持時間不活,因此這個方法在跨瀏覽器的情況下,也只能用來組織事件冒泡。