萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript中傳統事件與現代事件

javascript中傳統事件與現代事件

   本文給大家介紹的是使用傳統事件的方法來模擬現代事件,十分的簡單實用,有需要的小伙伴可以參考下。

  大家都知道,IE中的現代事件綁定(attachEvent)與W3C標准的(addEventListener)相比存在很多問題,

  例如:內存洩漏,重復添加事件並觸發的時候是倒敘執行等。

  下面是用傳統事件的方法來處理封裝事件的綁定:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 addEvent.ID = 1; // 事件計數器 function addEvent(obj, type, fn){ if(obj.addEventListener){ obj.addEventListener(type, fn, false); } else { // IE // 判斷對象是否存在,保證只有一個對象,否則每執行一次,會創建一個事件對象 // 以鍵值對的形式儲存類型與函數的一個數組,=======將事件對象數組掛載到obj對象是為   了方便事件的刪除 if( !obj.events){ // 相當於結構為:obj.events : {click:[fn1,fn2], mouserover:[fn1], ...} obj.events = {}; } var flag = false; // 存儲事件對象 if( !obj.events[type]){ // 類型數據儲存挨個函數 obj.events[type] = []; // 該類型的第一次事件類型及函數儲存到該類型數組中的第一位 obj.events[type][0] = fn; } else { var eventfn = obj.events[type]; // 循環遍歷該類型對象查詢該事件是否重復,如果重復flag為true,並return返回 for(var i in eventfn){ if(eventfn[i] == fn ){ flag = true; return; } } // 判斷該事件是否重復,重復的話就不進行事件的函數的存儲,否則儲存該事件並執行 if( !flag ){ // 當該類型已經存在了,將為該事件進行累計時間類型函數存儲,最後循環執行 eventfn[addEvent.ID++] = fn; }   }   // 事件函數 類型數組 函數遍歷調用 obj["on"+type] = function(){ var event = window.event; // 事件對象的儲存   // 在事件對象後添加函數,當執行的時候調用,並阻止默認行為的發生,與W3C標准同步 event.preventDefault = function(){ this.returnValue = false; }; // 在事件對象後面添加函數,一個尾巴函數,停止冒泡。 event.stopPropagation = function(){ this.cancelBubble = true; };   // 循環遍歷執行類型儲存的多個函數 var evfn = obj.events[type]; for(var i in evfn){ // 順序執行該類型的事件函數,解決了傳統事件的覆蓋問題和現代事件綁定的逆序觸發   事件的問題 evfn[i].call(this, event); // 將執行函數放置在該對象的環境下執行,並傳遞一個事件對   象給函數回調使用 } }   } }     function removeEvent(obj, type, fn){ if(obj.removeEventListener){ obj.removeEventListener(type, fn, false); } else { // 循環遍歷該對象下該類型的事件函數是否函數該函數,如果有就將該事件函數刪除 var evefn = obj.events[type]; for(var i in evefn){ if(evefn[i] == fn){ // delete evefn[i]; 該方法也可以刪除該數組的該項,但是會保留該位置當訪問的時候值   為undefined evefn.splice( i, 1); // 從第i的位置刪除1位, } }   } }

      以上所述就是本文的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved