• 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);
         }
     }
  • 相关阅读:
    WPF--模板选择
    C#基础知识回顾--委托事件
    WPF刷新界面之坎坷路
    git 复位出现If no other git process is currently running, this probably means a git process crashed in this repo
    winrar 授权破解过期解决
    百度地图经纬度批量查找功能XGeocoding使用手册
    variant conversion error for variable v23
    oracle exp导出加上过滤条件
    office 格式刷双击无法启用连刷模式
    xsl 文件如何定义 Javascript 函数并且调用
  • 原文地址:https://www.cnblogs.com/rainbow8590/p/7183357.html
Copyright © 2020-2023  润新知