Fork me on GitHub

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 };

我们需要知其然，更需要知其所以然。只有这样，才能更好的进行前端javascript开发。最后给大家推荐一个IT视频学习网站：慕课

posted @ 2015-09-09 13:19  JackWang-CUMT  阅读(4293)  评论(1)  编辑  收藏  举报