IE與現(xiàn)代瀏覽器添加事件和刪除事件的方法存在一定缺陷

現(xiàn)代瀏覽器自帶的方法：addEventListener&removeEventListener

IE瀏覽器自帶的方法：attachEvent&detachEvent

?

IE版本存在問題有以下幾個：

1.一個對象有多個事件執(zhí)行的順序與現(xiàn)代瀏覽器的執(zhí)行順序相反

2.多個相同事件相同方法多次執(zhí)行并不能只能的判斷

3.內(nèi)存泄漏的問題

4.this對象的傳遞問題

一下是封裝的一個ie的兼容版本（感謝李炎恢老師的視屏課程）

//設(shè)置初始的事件函數(shù)ID,利用對象的方法減少全局變量的混亂 addEvent.ID = 1; //執(zhí)行事件函數(shù) addEvent.exec = function(ev){//兼容阻止冒泡與默認(rèn)事件的方法addEvent.fixEvent 這樣可以直接在外使用ev.preventDefault()與ev.stopPropagation()var E = ev || addEvent.fixEvent(window.event);//因為是使用的對象屬性來傳遞參數(shù)所以可以使用this.event[E.type]//E.type是獲取事件名的方法比如'click'//其中this表示的是執(zhí)行函數(shù)的那個對象var attr = this.events[E.type];for(var i in attr){//把這個函數(shù)call給執(zhí)行的那個對象'this' 第二個參數(shù)傳遞的是event對象attr[i].call(this,E);} } //判斷事件函數(shù)是否相同 addEvent.equal = function(attr,fn){for(var i in attr){//如果數(shù)組中有和當(dāng)前傳入函數(shù)相等的函數(shù)那么就返回true上一層接收到true執(zhí)行返回false這樣跳出函數(shù)執(zhí)行if(attr[i] == fn){return true;}}return false; } //添加阻止默認(rèn)事件 addEvent.fixEvent = function(){//阻止默認(rèn)事件this.preventDefault = addEvent.fixEvent.preventDefault;//阻止事件冒泡this.stopPropagation = addEvent.fixEvent.stopPropagation; } //阻止默認(rèn)事件 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{//創(chuàng)建一個存放事件的容器if(!obj.events){obj.events = {};}//第一次執(zhí)行函數(shù)時執(zhí)行的內(nèi)容if(!obj.events[type]){//創(chuàng)建一個事件函數(shù)存放的數(shù)組容器obj.events[type] = [];//存放第一個事件函數(shù)obj.events[type][0] = fn;}else{//如果判斷出傳入函數(shù)與庫中有沖突那么直接跳出函數(shù)執(zhí)行if(addEvent.equal(obj.events[type],fn)){return false;}//執(zhí)行把函數(shù)儲存到數(shù)組中obj.events[type][addEvent.ID++] = fn;}//執(zhí)行事件函數(shù)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]){//把對象中的函數(shù)數(shù)組拿出來進(jìn)行比較如果有符合要求的函數(shù)則執(zhí)行刪除程序if(obj.events[type][i] == fn){delete obj.events[type][i];}}} 完整代碼

?

轉(zhuǎn)載于:https://www.cnblogs.com/BobSky/archive/2013/05/31/3110380.html

總結(jié)

以上是生活随笔為你收集整理的完美/兼容版添加事件以及删除事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。