• 完美/兼容版添加事件以及删除事件


    IE与现代浏览器添加事件和删除事件的方法存在一定缺陷

    现代浏览器自带的方法:addEventListener&removeEventListener

    IE浏览器自带的方法:attachEvent&detachEvent

    IE版本存在问题有以下几个:

    1.一个对象有多个事件执行的顺序与现代浏览器的执行顺序相反

    2.多个相同事件相同方法多次执行并不能只能的判断

    3.内存泄漏的问题

    4.this对象的传递问题

    一下是封装的一个ie的兼容版本(感谢李炎恢老师的视屏课程)

    //设置初始的事件函数ID,利用对象的方法减少全局变量的混乱
    addEvent.ID = 1;
    //执行事件函数
    addEvent.exec = function(ev){
        //兼容阻止冒泡与默认事件的方法addEvent.fixEvent 这样可以直接在外使用ev.preventDefault()与ev.stopPropagation()
        var E = ev || addEvent.fixEvent(window.event);
        //因为是使用的对象属性来传递参数所以可以使用this.event[E.type]
        //E.type是获取事件名的方法比如'click'
        //其中this表示的是执行函数的那个对象
        var attr = this.events[E.type];
        for(var i in attr){
            //把这个函数call给执行的那个对象'this' 第二个参数传递的是event对象
            attr[i].call(this,E);
        }
    }
    //判断事件函数是否相同
    addEvent.equal = function(attr,fn){
        for(var i in attr){
            //如果数组中有和当前传入函数相等的函数那么就返回true上一层接收到true执行返回false这样跳出函数执行
            if(attr[i] == fn){
                return true;
            }
        }
        return false;
    }
    //添加阻止默认事件
    addEvent.fixEvent = function(){
        //阻止默认事件
        this.preventDefault = addEvent.fixEvent.preventDefault;
        //阻止事件冒泡
        this.stopPropagation = addEvent.fixEvent.stopPropagation;
    }
    //阻止默认事件
    addEvent.fixEvent.preventDefault = function(){
        this.returnValue = false;
    }
    //阻止事件冒泡
    addEvent.fixEvent.stopPropagation = function(){
        this.cancelBubble = true;
    }
    //跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(typeof obj.addEventListener != 'undefined'){
            obj.addEventListener(type,fn,false);
        }else{
            //创建一个存放事件的容器
            if(!obj.events){
                obj.events = {};
            }
            //第一次执行函数时执行的内容
            if(!obj.events[type]){
                //创建一个事件函数存放的数组容器
                obj.events[type] = [];
                //存放第一个事件函数
                obj.events[type][0] = fn;
            }else{
                //如果判断出传入函数与库中有冲突那么直接跳出函数执行
                if(addEvent.equal(obj.events[type],fn)){
                    return false;
                }
                //执行把函数储存到数组中
                obj.events[type][addEvent.ID++] = fn;
            }
            //执行事件函数
            obj['on'+type] = addEvent.exec;
        }
    }
    //跨浏览器删除事件
    function removeEvent(obj,type,fn){
        if(typeof obj.removeEventListener != 'undefined'){
            obj.removeEventListener(type,fn,false);
        }else{
            for(var i in obj.events[type]){
                //把对象中的函数数组拿出来进行比较如果有符合要求的函数则执行删除程序
                if(obj.events[type][i] == fn){
                    delete obj.events[type][i];
                }
            }
        }
    完整代码
  • 相关阅读:
    手机浏览器
    一招封住360流氓
    原来在Delphi中的类型是严格匹配的
    Windows 7下面3389远程连接时“超出最大连接数”解决办法
    大家开发过淘宝商城API应用的么?
    adodb.recordset 添加记录后无法取得ID
    VBATrack Picture
    java web后台开发SSM框架(Spring+SpringMVC+MyBaitis)搭建与优化
    VBATrack MsgBox
    VBATrack 暂停3秒运行
  • 原文地址:https://www.cnblogs.com/BobSky/p/3110380.html
Copyright © 2020-2023  润新知