你的位置:首页 > Java教程

[Java教程]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视频学习网站:慕课