DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 純JavaScript實現的兼容各浏覽器的添加和移除事件封裝
純JavaScript實現的兼容各浏覽器的添加和移除事件封裝
編輯:關於JavaScript     
//事件處理兼容各種浏覽器,采用能力檢測方法,所謂能力檢測,就是有能力就做,沒有能力就不做
 
 //定義一個處理事件的對象,兼容各種浏覽器,dom2級事件處理和ie事件,如果這兩個事件都不兼容,就采用dom0級處理
 var eventUtil ={
    addEvent:function(element,type,handler){
      if (element.addEventListener) {
      	//非IE浏覽器采用dom2級事件處理,type為事件類型如:click,handler為事件處理函數,false代表事件采用冒泡處理模型,如果是true代表 采用捕獲型處理模型
      	//除了netbeans采用捕獲型處理模型,其他都采用冒泡型處理模型
      	//如果是非IE浏覽器添加事件為:addEventListener
      	element.addEventListener(type,handler,false);
      }else if (element.attachEvent) {
      	//如果為IE浏覽器,添加事件采用 attachEvent
      	element.attachEvent('on'+type,handler);
      }else{
        element['on'+type] = handler;
      }
    },
    removeEvent:function(element,type,handler){
      if (element.removeEventListener) {
      	//非IE浏覽器采用dom2級事件處理,type為事件類型如:click,handler為事件處理函數,false代表事件采用冒泡處理模型,如果是true代表 采用捕獲型處理模型
      	//除了netbeans采用捕獲型處理模型,其他都采用冒泡型處理模型
      	//如果是非IE浏覽器添加事件為:removeEventListener
      	element.removeEventListener(type,handler,false);
      }else if (element.detachEvent) {
      	//如果為IE浏覽器,添加事件采用 detachEvent
      	element.detachEvent('on'+type,handler);
      }else{
      	//dom0級事件處理,如果刪除事件采用賦值null
        element['on'+type] = null;
      }
    },
    getEvent:function(event){
    	  //獲取事件本身
    	 return event?event:window.event;
    },
    getType:function(event){
    	 //獲取事件類型
    	 return event.type;
    },
    getElement: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;
    	  }
    }




 }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved