javascript通用事件封装
2015-09-02 16:26
495 查看
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互。网页应用大部分的交互需要用javascript事件进行实现。虽然当前存在大量的且功能强大的javascript库,但这些类库或者框架都经过函数封装,对于用户而言隐藏了内部实现机制(虽然可以查看和研究源代码,但是有多少童鞋能潜心研究呢?)。定制或者构建一个自己的小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为onclick ele.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.srcElement return 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,则返回顶级元素document var 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视频学习网站:爱慕课
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例