javascript通用事件封裝

javascript通用事件封裝
  隨著最近幾年Html5的興起，越來越多的應用採用html5進行實現，一個優秀的網頁應用不但需要美觀簡潔的UI介面，更需要一個良好的互動。網頁應用大部分的互動需要用javascript事件進行實現。雖然當前存在大量的且功能強大的javascript庫，但這些類庫或者架構都經過函數封裝，對於使用者而言隱藏了內部實現機制（雖然可以查看和研究原始碼，但是有多少童鞋能潛心研究呢？）。定製或者構建一個自己的小javascript庫，對於童鞋們提升前端開發水平來說，也具有重要的價值。 廢話不多說，下面給出一個通用的javascript事件工具庫，並通過注釋來瞭解原生的javascript用法：  

  1 //javascript通用事件封裝  2 var myEventUtil={  3                 //版本  4                 version:'1.0',  5                 //日期  6                 datetime:'2015-8-25',  7                 author:'jack Wang',  8                 //這裡均用冒泡事件模型  9                 //添加事件函數,調用方法addEvent(btn1,'click',showmsg); 10                 addEvent:function(ele,event,func){ 11                     //用能力檢測進行跨瀏覽器安全色處理 12                     //DOM 2 事件處理 13                     if(ele.addEventListener) 14                     { 15                         //false表示冒泡事件模型 16                         ele.addEventListener(event,func,false); 17                     } 18                     else if(ele.attachEvent) 19                     { 20                         //若是click事件,IE為onclick 21                         ele.attachEvent('on'+event,func); 22                     } 23                     else 24                     { 25                         //DOM 0級事件，相容老瀏覽器 26                         //not ele.'on'+event=func; 27                         //js中.可以用[]進行代替 28                         ele['on'+event]=func; 29                     } 30                 }, 31                 //刪除事件函數 32                 delEvent:function(ele,event,func){ 33                     if(ele.removeEventListener) 34                     { 35                         ele.removeEventListener(event,func,false); 36                     } 37                     else if(ele.detachEvent){ 38                         ele.detachEvent('on'+event,func);//IE 39                     } 40                     else 41                     { 42                         //DOM 0級事件，相容老瀏覽器 43                         ele['on'+event]=null; 44                     } 45                 }, 46                 //擷取觸發事件的源DOM元素 47                 getSrcElement:function(event){ 48                     //如果event.target不為空白，則返回event.target值 49                     //否則返回event.srcElement 50                     return event.target || event.srcElement; 51                 }, 52                 //擷取事件類型 53                 getType:function(event) 54                 { 55                     return event.type; 56                 }, 57                 //擷取事件 58                 getEvent:function(event){ 59                     //window.event為相容IE版本 60                     return event?event:window.event; 61                 }, 62                 //阻止事件冒泡 63                 stopBuble:function(event){ 64                     if(event.stopPropagation){ 65                         event.stopPropagation(); 66                     } 67                     else{ 68                         event.cacelBuble=false;//IE 69                     } 70                 }, 71                 //禁用預設行為 72                 preventDefault:function(event){ 73                     if(event.preventDefault){ 74                         event.preventDefault(); 75                     } 76                     else 77                     { 78                         event.returnValue=false;//IE為屬性 79                     } 80                 }, 81                 //根據元素ID名稱擷取元素 82                 $id:function(eleid){ 83                     return document.getElementById(eleid); 84                 }, 85                 //根據ClassName擷取元素數組,提供父元素能提高檢索效率 86                 //用法：var eles=getByClass('foo'); 87                 getByClass:function(className,parent){ 88                     //如果不提供parent，則返回頂級元素document 89                     var oParent=parent?this.$id(parent):document; 90                     //能力檢測 91                     if(oParent.getElementsByClassName) 92                     { 93                         //通過在字串中使用空格分隔類,也可以匹配多個類, 94                         //下面的代碼挑選出了所有既擁有foo類名稱又擁有bar類名稱的元素: 95                          //var eles = document.getElementsByClassName('foo bar'); 96                         return oParent.getElementsByClassName(className); 97                     } 98                     else 99                     {100                         var retEles=[];101                         //擷取父元素下的所有子項目102                         var childs=oParent.getElementsByTagName('*');103                         for(var i=0,len=childs.length;i<len;i++){104                             //元素className類名匹配105                             if(childs[i].className==className){106                                 retEles.push(childs[i]);107                             }108                         }109                         return retEles;110                    }111                 },112                 //根據ClassName擷取首元素113                 getFirstByClass:function(className,parent){114                     //var eles=getByClass(className,parent);115                     //不加this.往往報getByClass未定義的錯誤116                     var eles=this.getByClass(className,parent);                117                     return eles[0];118                 },119                 //擷取版本資訊120                 getVersion:function(){121                     return 'Version:'+this.version;122                 }123 124 };