• 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);
         }
     }
  • 相关阅读:
    读书笔记_数学之美
    在VMware上安装ubuntu——网络类型
    读书笔记_探索式测试_全局探索式测试法
    读书笔记_探索式测试_软件质量和手工测试
    关系型数据库的范式
    求最小支配集,最小点覆盖,最大独立集
    10.20testT3
    10.24testT3
    [HNOI2015]亚瑟王
    卡塔兰数
  • 原文地址:https://www.cnblogs.com/rainbow8590/p/7183357.html
Copyright © 2020-2023  润新知