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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。