addEventListener 和attachEvent 兼容性封装

addEventListener 和attachEvent 兼容性封装

addEventListener 和attachEvent 是DOM2级事件绑定的方法，但是IE只支持attachEvent ，并且在有同一个事件源执行多个事件名相同的方法时，会有this指向，顺序，重复的问题，下面函数是进行封装的，兼容所有的浏览器。    var tempFn = null;    function  bind(curEle,eventType,eventFn){        if("addEventListener" in document){            curEle.addEventListener(eventType,eventFn,false);            return;        }        //解决this指向问题,并记录改变this前的eventFn        tempFn = function(){            eventFn.call(curEle)        }        tempFn.photo = eventFn;        //判断该自定义属性之前是否存在,不存在就创建，存储多个方法改变this指向后的结果        if(!curEle['myBind'+eventType]){            curEle['myBind'+eventType] = [];        }        //解决重复问题        // 添加前，看一下之前是否已经有了，有了就不添加，也不往事件池中存储        var ary = curEle['myBind'+eventType]        for(var i = 0 ; i < ary.length; i++){            if(ary[i].photo == eventFn){                return;            }        }        ary.push(tempFn);        curEle.attachEvent("on"+eventType,tempFn);        }        function unbind(curEle,eventType,eventFn){        if("removeEventListener" in document){            curEle.removeEventListener(eventType,eventFn,false);            return;        }        var ary = curEle['myBind'+eventType];        for(var i = 0 ; i < ary.length; i++){            if(ary[i].photo == eventFn){                //找到后解除绑定                curEle.detachEvent("on"+eventType,ary[i]);                //移除自定义属性中对应的那一项                arr.splice(i,1);                break;             }        }    }     //解决顺序问题     function on(curEle,eventType,eventFn){        if(!curEle['myBind'+eventType]){            curEle['myBind'+eventType] = [];        }        var ary = curEle['myBind'+eventType]        for(var i = 0 ; i < ary.length ; i++){            var cur = ary[i];            if(cur == eventFn){                return;            }        }        ary.push(eventFn);        bind(curEle,eventType,run)     }     function off(curEle,eventType,eventFn){        var ary = curEle['myEvent' + eventType];        for(var i = 0 ; i < ary.length; i++){            var cur = ary[i];            if(cur == eventFn){                ary.splice(i,1)            }        }     }     function run(e){        e = e || window.event        var flag = e.target? true:false;        if(!flag){            e.target = e.srcElement;            e,pageX = e.clientX +(document.documentElement.scrollLeft || document.body.scrollLeft)            e,pageY = e.clientY +(document.documentElement.scrollTop || document.body.scrollTop)            e.preventDefault = function(){            e.returnValue = false        }        e.stopPropagation = function(){            e.cancelBubble = true;        }     }     //this ---->  e.target     var ary = this['myEvent'+e.type];     for(var i = 0 ; i < ary.lengthl i++){        var tempFn = ary[i];        tempFn.call(this,e);     } }