zoukankan      html  css  js  c++  java
  • 完美/兼容版添加事件以及删除事件

    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];
                }
            }
        }
    完整代码
  • 相关阅读:
    经典音乐插曲推荐![附地址]
    广播电台常用51首背景音乐——绝对经典
    酒吧..夜店常用歌曲~潮人必备音乐噢~【附下载地址】
    ASP与ASP.NET互通COOKIES的一点经验
    linux进程状态浅析
    常用的酒吧经典乐曲106首
    呼和浩特电视台媒资管理系统的设计与分析
    不再为DataGrid生成的表格的单无格中的内容过长、自动折行、表格撑开等问题而烦恼
    Linux shell脚本全面学习
    ASP.NET文件管理显示信息
  • 原文地址:https://www.cnblogs.com/BobSky/p/3110380.html
Copyright © 2011-2022 走看看