Javascript中事件库的封装

@(Javascript闯关笔记)

在浏览器中，对于事件的操作，兼容性主要是存在DOM2级事件里面，标准浏览器是通过addEventListener()和removeEventListener()来注册事件和绑定事件，在低级版本的IE浏览器里面是有对应的attachEvent()和detachEvent()；再者是里面传入的事件行为，标准的不带on，IE带on；接着是事件处理函数里面的this指向；事件重复绑定的问题，事件绑定顺序与执行顺序的问题

// 事件绑定的元素，事件类型，事件处理函数
function on(ele,type,fn){
    // 区分浏览器
    if(ele.addEventListener){
         ele.addEventListener(type,fn,false);// 冒泡
     }else{ // IE6-8
         if(!ele['on'+type]){
             ele['on'+type]=[];
             //解决run被重复绑定的问题
             ele.attachEvent('on'+type,function(){
                  run.call(ele);
              })
           }

          // 去重判断，解决重复绑定的问题
          for(var i=0;i<ele['on'+type].length;i++){
               if(a[i]===fn) return;
           }
           ele['on'+type].push(fn);
      }
 }
//拿到"数组"中的每个方法，进行顺序调用  主要是针对IE浏览器的设置
function run(){
    var e=window.event;
     //对事件对象做兼容处理
      e.target=e.srcElement; // 事件源
    e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX; // clientX/Y:鼠标点击的位置距离可视区页面左上角的距离   scrollLeft：是滚动条滚动的距离（IE兼容处理），pageX/Y：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
    e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
    e.preventDefault=function(){//阻止默认事件
        e.returnValue=false;
    };
    e.stopPropagation=function(){
        e.cancelBubble=true;//阻止冒泡；
    };
   // this是指向ele
     var a=this["on"+e.type];
    if(a.length){//证明数组有长度，可以循环调用；
        for(var i=0; i<a.length; i++){
            if(typeof  a[i]==='function'){
                a[i].call(this,e);//fn1 fn2 fn3
            }else{
                a.splice(i,1); // 移除
                i--; // 防止数组塌陷
            }
        }
    }
 }


//从"数组"中找到要"解除绑定"的方法，赋值为null
function off(ele,type,fn){
    if(ele.removeEventListener){
        ele.removeEventListener(type,fn,false);
    }else{
        //拿到数组，遍历判断，并赋值为null
        var a=ele["on"+type];
        for(var i=0; i<a.length; i++){
            if(a[i]===fn){
                a[i]=null;
                break;
            }
        }
    }
}