如何优雅的封装一个DOM事件库

//实例 1

obj.addEventListener(事件类型 , 处理函数 , false)

//IE9以下不兼容，可以为一个事件绑定多个处理程序，并且按照绑定时的顺序去执行

//实例2

div.addEventListener('click' , function f() {} , false); //

div.addEventListener('click' , function f() {} , false); //

//事件1和事件2虽然执行的函数一样，但是函数f()的地址不一样，所以是2个处理函数，执行2次

//实例3

function f() {};

div.addEventListener('click' , f , false); //

div.addEventListener('click' , f , false); //

//事件1和事件2执行的函数都是f(),但因为地址一样，所以只执行一次。即某一个元素的同一个行为只能绑定一次相同的方法

function fn() {};

div.addEventListener('click',fn,false);

div.removeEventListener('click',fn,false);

function bind(curEle,eventType,eventFn){

        ...

        var tempFn = function () {

            eventFn.call('curEle');

        };

        tempFn.photo = eventFn;//给传入的每一个函数做一个唯一标识

        //首先判断该自定义属性之前是否存在，不存在的话创建一个，由于要存储多个方法，所以我们让其值是一个数组

        //为什么要对不同的事件类型创建不同的数组呢，因为不同的事件可能执行相同的方法。如mouseover 和 click 都执行fn1方法时，移除的时候就可能出错

        if (!curEle['bindFn' + eventType]) {

            curEle['bindFn' + eventType] = [];

        }

        curEle['bindFn' + eventType].push(tempFn);

        curEle.attachEvent("on" + eventType,tempFn);

    }

    function unbind(curEle,eventType,eventFn) {

        ...

        var arr = curEle['bindFn' + eventType];

        for (var i = 0; i < arr.length; i ++) {

            if (arr[i].photo === eventFn) {

                arr.splice(i,1);//找到后，把自己存储容器中对应的移除掉，与事件池中保持一致

                curEle.detachEvent("on" + eventType,arr[i]);//把事件池中对应的方法移除掉

                break;

            }

        }

    }

　　//创建自己的事件池，并把需要给当前元素绑定的方法依次增加到事件池中

    function on(curEle,eventType,eventFn) {

        if (!curEle['myEvent' + eventType]) {

            curEle['myEvent' + eventType] = [];

        }

        var arr = curEle['myEvent' + eventType];

        for (var i = 0; i < arr.length; i ++) {

            if (arr[i] === eventFn) return ;

        }

        arr.push(eventFn)

        bind(curEle,eventType,run);//把run方法绑定到自定义的bind()函数中，这个bind函数解决了this指向和重复问题。因此绑定后run方法的this指向当前点击元素

    }

 　　//在自己的事件池中把某一个方法移除

    function off(curEle,eventType,eventFn) {

        var arr = curEle['myEvent' + eventType];

        for (var i = 0; i < arr.length; i ++) {

            if (arr[i] === eventFn) {

                arr.splice(i,1);

            }

        }

    }

 　  //由于IE6-8浏览器DOM2级事件执行多个绑定方法时会出现顺序混乱，我们就只给它绑定一个run方法，然后在run方法里执行事件池on里绑定的方法。

    function run(event) {

        event = event || window.event;

        var flag = event.target ? true :false ;//IE6-8下不兼容event.target

        if (!flag) {//做非兼容处理

            event.target = window.srcElement;

            event.pageX = event.clientX + document.documentElement.scrollLeft;

            event.pageY = event.clentY +document.documentElement.scrollTop;

            event.preventDefault = function () {

                event.returnValue = false ;

            }

            event.stopPropagation = function () {

                event.cancleBubble = true ;

            }

        }

        //获取事件池中绑定的方法，并且让这些方法依次执行

        var arr = event.target['myEvent' + event.type];

        for (var i = 0; i < arr.length; i ++) {

            arr[i].call(event.target,event);//把事件对象传递给当前执行的函数

        }

    }

//绑定事件
function on(ele,type,fn) {

    if(ele.addEventListener) {

        ele.addEventListener(type,fn,false);

    } else{

        if (!ele['myEvent' + type]) {

            ele['myEvent' + type] = [];

            ele.attachEvent('on' + type,function(){//在这里绑定run方法

                run.call(ele);

            })

        }

        let arr = ele['myEvent' + type];

        for(let i = 0; i < arr.length; i++) {

            if (arr[i] == fn) {

                return;

            }

        }

        arr.push(fn);

    }

}


//解决IE下事件执行顺序的run方法

function run() {

    let e = window.event;//在IE6-8下，事件对象是存储在全局的event属性上的

    e.target = e.srcElement;

    e.preventDefault = function () {

        e.returnValue = false ;

    }

    e.stopPropagation = function () {

        e.cancleBubble = true ;

    }

    let arr = this['myEvent' + event.type];

    for(let i = 0; i < arr.length; i++) {

        if(arr[i] == null) {//在这里删除被解绑的方法

            arr.splice(i,1);

            i--;

        }

        arr[i].call(this,event);

    }

}


//解除事件

function off(ele,type,fn) {

    if (ele.removeEventListener) {

        ele.removeEventListener(type,fn,false);

    } else {

        let arr = ele["myEvent" + type];

        for(let i = 0; i < arr.length; i++) {

            if (arr[i] == fn) {

                arr[i] = null;

                //arr.splice(i,1);这里为什么不能直接删除掉，而是要用null来占位。答案是：为了不改变arr的长度。使run能正确执行。

                return;

            }

        }

    }

}