javascript通用事件封装

       随着最近几年Html5的兴起，越来越多的应用采用html5进行实现，一个优秀的网页应用不但需要美观简洁的UI界面，更需要一个良好的交互。网页应用大部分的交互需要用javascript事件进行实现。虽然当前存在大量的且功能强大的javascript库，但这些类库或者框架都经过函数封装，对于用户而言隐藏了内部实现机制（虽然可以查看和研究源代码，但是有多少童鞋能潜心研究呢？）。定制或者构建一个自己的小javascript库，对于童鞋们提升前端开发水平来说，也具有重要的价值。

废话不多说，下面给出一个通用的javascript事件工具库，并通过注释来了解原生的javascript用法：

//javascript通用事件封装var myEventUtil={//版本version:'1.0',//日期datetime:'2015-8-25',author:'jack Wang',//这里均用冒泡事件模型//添加事件函数,调用方法addEvent(btn1,'click',showmsg);addEvent:function(ele,event,func){//用能力检测进行跨浏览器兼容处理//DOM 2 事件处理if(ele.addEventListener){//false表示冒泡事件模型ele.addEventListener(event,func,false);}else if(ele.attachEvent){//若是click事件,IE为onclickele.attachEvent('on'+event,func);}else{//DOM 0级事件，兼容老浏览器//not ele.'on'+event=func;//js中.可以用[]进行代替ele['on'+event]=func;}},//删除事件函数delEvent:function(ele,event,func){if(ele.removeEventListener){ele.removeEventListener(event,func,false);}else if(ele.detachEvent){ele.detachEvent('on'+event,func);//IE}else{//DOM 0级事件，兼容老浏览器ele['on'+event]=null;}},//获取触发事件的源DOM元素getSrcElement:function(event){//如果event.target不为空，则返回event.target值//否则返回event.srcElementreturn event.target || event.srcElement;},//获取事件类型getType:function(event){return event.type;},//获取事件getEvent:function(event){//window.event为兼容IE版本return event?event:window.event;},//阻止事件冒泡stopBuble:function(event){if(event.stopPropagation){event.stopPropagation();}else{event.cacelBuble=false;//IE}},//禁用默认行为preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;//IE为属性}},//根据元素ID名称获取元素$id:function(eleid){return document.getElementById(eleid);},//根据ClassName获取元素数组,提供父元素能提高检索效率//用法：var eles=getByClass('foo');getByClass:function(className,parent){//如果不提供parent，则返回顶级元素documentvar oParent=parent?this.$id(parent):document;//能力检测if(oParent.getElementsByClassName){//通过在字符串中使用空格分隔类,也可以匹配多个类,//下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素: //var eles = document.getElementsByClassName('foo bar');return oParent.getElementsByClassName(className);}else{var retEles=[];//获取父元素下的所有子元素var childs=oParent.getElementsByTagName('*');for(var i=0,len=childs.length;i<len;i++){//元素className类名匹配if(childs[i].className==className){retEles.push(childs[i]);}}return retEles;   }},//根据ClassName获取首元素getFirstByClass:function(className,parent){//var eles=getByClass(className,parent);//不加this.往往报getByClass未定义的错误var eles=this.getByClass(className,parent);return eles[0];},//获取版本信息getVersion:function(){return 'Version:'+this.version;}};</span>

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