博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
完美/兼容版添加事件以及删除事件
阅读量:5362 次
发布时间:2019-06-15

本文共 2389 字,大约阅读时间需要 7 分钟。

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];            }        }    }
完整代码

 

转载于:https://www.cnblogs.com/BobSky/archive/2013/05/31/3110380.html

你可能感兴趣的文章
【译】x86程序员手册31- 第9章 异常和中断
查看>>
php 命令行方式运行时 几种传入参数的方式
查看>>
asp.net注册页面代码
查看>>
Ways to keep WPF Application's UI alive...
查看>>
VC++6.0打包程序为可执行文件
查看>>
动画(一)
查看>>
NetworkReachable学习笔记
查看>>
从0到1
查看>>
Python 列表(list)与浅拷贝深拷贝介绍
查看>>
工具类---OC自定义函数---计算当前路径下所有代码文件的总行数 .c\.h\.m文件的总行数...
查看>>
快速阅读学习方法笔记
查看>>
IAR530变成了日语,改回英语
查看>>
二)spring 集成 ehcache jgroups 集群
查看>>
Linux更新程序脚本
查看>>
《工业大数据白皮书》2019版正式发布(附下载)
查看>>
手把手教你如何安装和使用Karma-Jasmine
查看>>
β版本第五次冲刺
查看>>
[转] MySql 数据类型
查看>>
计划:怎样学习在图像分割中水平集算法
查看>>
【转】 Pro Android学习笔记(六九):HTTP服务(3):HTTP POST MultiPart
查看>>