Javascript中事件库的封装

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

解决办法的核心

数组

• 创建自己的事件池，放在数组里面
• 把自己的事件池函数绑定在系统上面，当自己的事件池删除事件，相对应的系统也就删除了事件

// 事件绑定的元素，事件类型，事件处理函数
function on(ele,type,fn){
    // 区分浏览器
    if(ele.addEventListener){
         ele.addEventListener(type,fn,false);// 冒泡
     }else{ // IE6-8
         if(!ele['on'+type]){  // 给元素ele身上自定义一个以事件命名的属性
             ele['on'+type]=[];
             //解决run被重复绑定的问题
             ele.attachEvent('on'+type,function(){
                  run.call(ele); // 事件处理函数的作用就是先把run函数里面的this指向ele
              })
           }
       
          // 去重判断，解决重复绑定的问题
          for(var i=0;i<ele['on'+type].length;i++){
               if(ele['on'+type][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  当函数被调用的时候，点前面是谁，this就是谁； 把a[i]函数中的this指向run里面的this也就是ele，然后获取事件对象e
            }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;  //找到要解除事件绑定的函数，不能删除，而要赋值为null;
                break; // 性能优化
            }
        }
    }
}