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);
     }
 }
posted @ 2017-07-15 16:46  rainbow8590  阅读(226)  评论(0编辑  收藏  举报