JS通用事件监听函数

JS通用事件监听函数

版本一

//把它全部封装到一个对象中
  var obj={
     readyEvent:function (fn){
      if(fn==null){
           fn=document;    
        }
        var oldOnload=window.onload;
        if(typeof window.onload !='function'){
            window.onload=fn;    
        }else{
            window.onload=function (){
               oldOnload();
               fn();    
            }
        }
     },//添加事假
     addEvent:function (element,type,handler){
         if(element.addEventListener){
            //事件类型 需要执行的函数 是否捕捉
            element.addEventListener(type,handler,false) 
         }else if(element.attachEvent){
             element.attachEvent('on'+type,function (){
                 handler.call(element);
             });
         }else{
            element['on'+type]=handler; 
         }
     },//移除事件
     removeEvent:function (element,type,handler){
         if(element.removeEventListener){
            element.removeEventListener(type,handler,false) 
         }else if(element.detachEvent){
            element.detachEvent('on'+type,handler)
         }else{
             element['on'+type]=null;
         }
     },//阻止事件冒泡
     stopPropagation:function (ev){
         if(ev.stopPropagation){
             ev.stopPropagation();
         }else{
             ev.canceBubble=true; 
         }
     },//取消事件的默认行为
     preventDefault:function (ev){
        if(event.preventDefault){
         event.preventDefault();
        }else{
         event.returnValue=false;
        }
     },//获取事件目标
     getTarget:function (event){
         return event.target || event.srcElement; 
     },//获取event对象的引用,取到event对象的引用；取得事件的所有信息；确保随时能用到event；
     getEvent:function (e){
        var ev=e||window.event;
        if(!ev){
          var c=this.getEvent.caller;
          while(c){
              ev=c.arguments[0];
              if(ev && Event==ev.constructor){
               break;
              }
              c=c.caller;
           }
        }
        return ev;
     }
  }

这里补充一点关于事件：srcElement 和 target(都指的是事件源) 

 srcElement是IE下的属性
 target是Firefox下的属性
 Chrome浏览器同时有这两个属性

实例一：

html

<input id="btnInfo" type="button" value="show" name="btn" />

<div id="infoq" style=" height:100px; width:100px; background:green;"></div>

js

window.onload=function (){
     
     var obj=document.getElementById("btnInfo");
     obj.onclick=function (ev){
         var e=ev || event;
         var target=e.srcElement || e.target; //这样就获取到饿了我们的事件源滴呀
         alert(target.value) 
     }
     
     //我们也可以直接的添加这个事件的属性滴呀
     var div=document.getElementById("infoq");
     div.onclick=function (ev){
         var e=ev || event;
         var target=e.srcElement || e.target; //这样就获取到饿了我们的事件源滴呀
         alert(target.style.width) 
     }
}

我们再来看一个实例

html

<input type="text" onblur="alert(this.value)" />

<input type="text" onblur="alertValue()" />

<input type="text" onblur="alertValue1(this)" />

js

function alertValue(){
  alert(this.value); //这样是不行的    
}
function alertValue1(oThis){
  alert(oThis.value);    
}

 

版本二

var EventUtil={
        addHandler:function (element,type,handler){
           if(element.addEventListener){
             element.addEventListener(type,handler,false);   
           }else{
             element.attachEvent('on'+type,hanlder);
           }
        },
        removeHandler:function (element,type,handler){
         if (element.removeEventListener){
             element.removeEventListener(type,hanlder,false); 
            }else if(element.detachEvent){
             element.detachEvent('on'+type,handler);
            }else{
             element['on'+type]=null;
            }
        },
        getEvent:function (event){
         return event?event:window.event;
        },
        getTarget:function(event){
          return event.target || event.srcElement;
        },
        preventDefault:function (event){
          if(event.preventDefault){
              event.preventDefault();
          }else{
              event.returnVauel=false;
          }
        },
        stopPropagation:function (event){
         if (event.stopPropagation){
             event.stopPropagation(); 
            }else{
             event.cancleBubble=true;
            }
        }
      
   }

 这里补充一篇关于事件的详细解读：http://www.admin10000.com/document/6293.html

这里，我们再补充一个高级一点js版本

 html

<style type="text/css">
 .outer{
     height:100px;
     width:100px;
     background:green;
 }
</style>
</head>

<body>
  <div id="outer" class="outer">
  </div>
</body>

javaScript

   //这个就是他的基本使用
   var $=function (d){
     typeof d=='string' && (d=document.getElementById(d))
     return $.fn.call(d); //这个就是基本的写法    
   }
   $.fn=function (){
       this.addEvent=function (eventType,handler){
          if(this.addEventListener){this.addEventListener(eventType,handler,false)}   
          else if(this.attachEvent){this.attachEvent('on'+eventType,handler)}
          else {this['on'+eventType]=handler}
       }
       this.removeEvent=function (eventType,handler){
           if(this.removeEventListener){this.removeEventListener(eventType,handler,false)} 
           else if(this.detachEvent){this.detachEvent('on'+eventType,handler)} 
           else{this['on'+eventType]==null}
       }
       return this;
   }
  //这样就添加了我们的事件监听的函数的呀
  var Bind=function (obj,fun,arr){
     return function (){
        return fun.apply(obj,arr);//这样做是为了方面传递参数滴呀
     }
  }
  
  //测试
  var obj=$('outer');
  obj.setAttribute('at','fuck');
  //要不然，被绑定的事件，无法获取该对象的属性的啊
  //这样就能够获取到我们对象的值滴呀
  //同样能够获取到我们传递的参数体呀
  obj.addEvent('mouseover',Bind(obj,function (para){
       var s=arguments; 
       console.log(para);
       console.log(this.getAttribute('at'))
       },['mouseover']) //这样我们的参数才算是完毕了滴呀
       );
       //这样我们的额参数就传递进去了滴一
 obj.addEvent('mouseout',Bind(obj, function (para){  
      console.log(para); 
      console.log(this.getAttribute('at'))
   },['mouseout'])
   );