雖然DOM和IE中的event對(duì)象不同上忍,但基于他們之間相似依舊可以拿出跨瀏覽器方案來寄狼。
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個(gè)新的方法。第一個(gè)是getEvent()烁竭,它返回的是event對(duì)象的引用∫仪剑考慮到IE重實(shí)踐對(duì)象的位置不同颖变,可以使用這個(gè)方法來取得event對(duì)象生均,而不必?fù)?dān)心指定事件處理程序的方式。在使用這個(gè)方法時(shí)腥刹,必須假設(shè)有一個(gè)事件對(duì)象傳入到時(shí)間處理程序中马胧,而且把該變量傳給這個(gè)方法,如下所示衔峰。
btn.onclick = function(event){
event = EventUtil.getEvent(event);
}
在兼容DOM的瀏覽器中佩脊。event變量只是簡單的傳入和傳回。而在IE中event參數(shù)是未定義的(undefined)垫卤,因此就會(huì)返回window.event威彰。將這一行代碼添加到事件處理程序的開頭,就可以確保隨時(shí)都能使用event對(duì)象穴肘,而不必?fù)?dān)心用戶使用的是什么瀏覽器歇盼。
第二個(gè)方法時(shí)getTarget(),他返回的是事件目標(biāo)评抚。在這個(gè)方法內(nèi)部豹缀,會(huì)檢測(cè)event對(duì)象的target屬性,如果存在返回該屬性的值慨代,否則邢笙,返回srcElement屬性的值∈坛祝可以像下面這樣使用這個(gè)方法氮惯。
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
}
第三個(gè)方法是preventDefault(),用于取消事件的默認(rèn)行為想暗。在傳入event對(duì)象后妇汗,這個(gè)方法會(huì)檢查是否存在preventDefault()方法,如果存在調(diào)用該方法江滨。如果preventDefault()方法不存在铛纬,則將returnValue設(shè)置為false。下面是這個(gè)方法的例子唬滑。
var link = document.getElementById("myLink");
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
以上代碼可以確保在所有瀏覽器中單擊該鏈接都不會(huì)打開另一個(gè)頁面告唆。首先,使用EventUtil.getEvent()取得event對(duì)象晶密,然后將其傳入EventUtil.preventDefault()以取消默認(rèn)行為擒悬。
第四個(gè)方法是stopPropagation(),其實(shí)現(xiàn)方式類似稻艰。首先嘗試使用DOM方法阻止事件流懂牧,否則就是用cancelBubble屬性。下面看一個(gè)例子。
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對(duì)象畜侦,然后將其傳入到EventUtil.stopPropagation()。別忘了由于IE不支持時(shí)間不活躯保,因此這個(gè)方法在跨瀏覽器的情況下旋膳,也只能用來組織事件冒泡。