1. 程式人生 > >跨瀏覽器的事件物件

跨瀏覽器的事件物件

雖然DOM和IE中的event物件不同,但是基於他們之間的相似性依舊可以拿出跨瀏覽器的方案來。IE中的event物件的全部資訊和方法DOM物件中都有,只不過實現方式不一樣。不過這種對應關係讓實現兩種事件模型之間的對映非常容易。可以對前面介紹的EventUtil物件加以增強,新增如下方法以求同存異。
var EventUtil = {
				addHandler:function(element,type,handler){
					if(element.addEventListener){//檢測是否存在DOM2級方法,
						element.addEventListener(type,handler,false);//如果存在DOM2級方法,傳入事件型別,事件處理程式,和第三個引數false(表示冒泡階段)
					}else if(element.attachEvent){
						element.attachEvent("on" + type,handler);//如果存在的IE方法,為了在IE8以及更早的瀏覽器中執行,此類事件型別必須加上on字首
					}else{
						element["on" + type] = handler;//DOM0級方法(現代瀏覽器中,應該執行不到這裡的程式碼),此時使用的是方括號語法來將屬性名指定為事件處理程式,或者將屬性設定為null
					}//DOM0級對每個事件只支援一個事件處理程式。
				},
				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.removeEventListener){
						element.removeEventListener(type,handler,false);
					}else if(element.detachEvent){
						element.detachEvent("on" + type,handler);
					}else{
						element["on" + type] = null;
					}					
				},
				stopPropagation:function(event){
					if(event.stopPropagation){
						event.stopPropagation();
					}else{
						event.cancelBubble = true
					}
				},
			};