IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    javascript通用事件封装 - JackWang-CUMT

    JackWang-CUMT发表于 2015-09-09 05:19:00
    love 0

           随着最近几年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视频学习网站:慕课


    本文链接:javascript通用事件封装,转载请注明。



沪ICP备19023445号-2号
友情链接