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];
                }
            }
        }
    完整代码
  • 相关阅读:
    图片上传-下载-删除等图片管理的若干经验总结3-单一业务场景的完整解决方案
    图片上传-下载-删除等图片管理的若干经验总结2
    HDU 1195 Open the Lock
    HDU 1690 Bus System
    HDU 2647 Reward
    HDU 2680 Choose the best route
    HDU 1596 find the safest road
    POJ 1904 King's Quest
    CDOJ 889 Battle for Silver
    CDOJ 888 Absurdistan Roads
  • 原文地址:https://www.cnblogs.com/BobSky/p/3110380.html
Copyright © 2011-2022 走看看