羊皮紙 服務
       
       
      分享
       
      原創部落格 /

      JScript 事件的共用

      上一篇
      下一篇
      本文
      JScript 事件的共用
      今天在增加網頁功能時,遇到了一個大問題:那就是當某些元件使用同一個事件時,若使用指定函數內容的方式來運作時,後者指定的函數會把前者函數覆寫,所以前者就會失效啦!

      這個問題第一個讓我想到的是:

      addEventListener('click',function(){});

      這個函數,說實在!我幾乎沒有用過這個函數,應該是說,沒用到!哈哈!以前常常會想著像這樣:

      object.onclick=function(){};

      指定函數就好了,這一刻才了解addEventListener 這種函數存在的道理,把新函數累加到舊函數裡去。

      於是我很熱血的查了一下addEventListener 的用法,發現不是每個瀏覽器都支援,於是又找到一個增加對於addEventListener 的支援的過載函數。

      增加對於addEventListener 的支援
      1. if (!Element.prototype.addEventListener) {
      2. var oListeners = {};
      3. function runListeners(oEvent) {
      4. if (!oEvent) { oEvent = window.event; }
      5. for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
      6. if (oEvtListeners.aEls[iElId] === this) {
      7. for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
      8. break;
      9. }
      10. }
      11. }
      12. Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
      13. if (oListeners.hasOwnProperty(sEventType)) {
      14. var oEvtListeners = oListeners[sEventType];
      15. for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
      16. if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
      17. }
      18. if (nElIdx === -1) {
      19. oEvtListeners.aEls.push(this);
      20. oEvtListeners.aEvts.push([fListener]);
      21. this["on" + sEventType] = runListeners;
      22. } else {
      23. var aElListeners = oEvtListeners.aEvts[nElIdx];
      24. if (this["on" + sEventType] !== runListeners) {
      25. aElListeners.splice(0);
      26. this["on" + sEventType] = runListeners;
      27. }
      28. for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
      29. if (aElListeners[iLstId] === fListener) { return; }
      30. }
      31. aElListeners.push(fListener);
      32. }
      33. } else {
      34. oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
      35. this["on" + sEventType] = runListeners;
      36. }
      37. };
      38. Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
      39. if (!oListeners.hasOwnProperty(sEventType)) { return; }
      40. var oEvtListeners = oListeners[sEventType];
      41. for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
      42. if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
      43. }
      44. if (nElIdx === -1) { return; }
      45. for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
      46. if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
      47. }
      48. };
      49. }

      想說這一下好了,問題解決了!NO....

      window.resize 這個事件沒法動呀!整個就是作白工!所以整個就是很火大!害我花了那麼多時間...

      最後魚戀用了自己想到的辦法:

      jaby_eventListener
      1. /* 作者:魚戀秋波 http://neil.heyxu.com */
      2. function jaby_eventListener(tar,icode){
      3. eval('var a = String('+tar+'?'+tar+':\'function(){}\')');
      4. var p1 = a.indexOf('{');
      5. var p2 = a.indexOf('}',-1);
      6. a = a.substring(p1+1,p2);
      7. var func = 'function(){ '+a+icode+'};';
      8. eval(tar+'='+func);
      9. }

      簡簡單單解決了困擾的問題~

      • 本文為原創文章, 為尊重著作權, 未經作者同意請勿任意轉載
      • 關鍵字 : iElId(16), oEvtListeners(15), iLstId(14), sEventType(11), aElListeners(9), nElIdx(8), function(8), oListeners(7), fListener(7), length(6), aEvts(6), runListeners(5), oEvent(5), return(3), prototype(3), break(3), Element(3), 想到(2), 增加(2), 函數(2)
      00
      2011-10-10T18:15:00+0000

      發表迴響
       
      驗證字串

      部落格目錄

      • 魚戀秋波 Neil Y.K.的部落格
        • 心情‧日記
        • 創作
          • 舞動程序
            • 關鍵詞庫系統搜尋及應用設計
            • 鍵盤測試工具
            • 宅配物流系統
            • 中文判定及轉換程式
            • 圖片裁切控制介面 ScaleFrame
            • 線上名片設計程式
            • 讓列表像瀑布一樣的 Puzzle 模組
            • 商品特徵設定程式
            • 網路履歷程式
            • 整合搜尋模組
            • 全球地理管理工具
            • 傳說中 IE 消失的文字
            • 全球化地理系統
            • 網頁輪播模組
            • 黑族塔羅牌陣程式
            • 英文地址轉換程式英文地址轉換程式
            • 黑族紙娃娃系統黑族紙娃娃系統
            • 索引地圖建立工具
            • 推薦好用的文字編輯器
            • JScript 事件的共用
            • 設定 PHP 檔案上傳容量限制
            • 許久不見的偵錯模式
            • 解決 Flash 無法在原網頁開啟連結
            • 雷達圖產生程式
            • 相片雜湊工具
            • Facebook 網站應用
            • 自創的防木馬登入網頁
          • 攝影
          • 繪圖
          • 文學
          • 素描
          • 水草情迷
        • 我的工作
        • 雜七雜八DIY
        • 流浪札記
        • 玩樂情報
        • 生活話題
        • 經方中醫
        • 未分類

      部落格列表

      QRCode 條碼 & APP 連結

      說明
      本頁網址

      在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
      QRCode

      訪客瀏覽統計

      • 訪客人數 : 8,605,451
      • 瀏覽次數 : 8,790,154
      • 瀏覽深度 : 102.1 %