YamPiz Servies
       
       
      Share
       
      Blog /

      JScript 事件的共用

      Previous
      Next
      Context
      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. }

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

      • This is a declared original article, to respect the copyright, please do not repost this article without the consent of the author.
      • Keywords : 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)
      0 0
      2011-10-10T18:15:00+0000

      Comment
       
      Verify

      Facebook Page

      Blog Directory

      • 魚戀秋波 Neil Y.K.'s Blog
        • 心情‧日記
        • Creation
          • 繪圖
          • Photographic
          • Sketch
          • Aquatic
          • Programming
            • 關鍵詞庫系統搜尋及應用設計
            • 鍵盤測試工具
            • 宅配物流系統
            • 中文判定及轉換程式
            • 圖片裁切控制介面 ScaleFrame
            • 線上名片設計程式
            • 讓列表像瀑布一樣的 Puzzle 模組
            • 商品特徵設定程式
            • 網路履歷程式
            • 整合搜尋模組
            • 全球地理管理工具
            • 傳說中 IE 消失的文字
            • 全球化地理系統
            • 網頁輪播模組
            • 黑族塔羅牌陣程式
            • 英文地址轉換程式英文地址轉換程式
            • 黑族紙娃娃系統黑族紙娃娃系統
            • 索引地圖建立工具
            • 推薦好用的文字編輯器
            • JScript 事件的共用
            • Set upload file size on PHP
            • 許久不見的偵錯模式
            • 解決 Flash 無法在原網頁開啟連結
            • 雷達圖產生程式
            • 相片雜湊工具
            • Facebook 網站應用
            • 自創的防木馬登入網頁
          • Literature
        • My Jobs
        • Misc DIY
        • Stray notes
        • 玩樂情報
        • 生活話題
        • 經方中醫
        • Unclass

      Blog List

      QR-Code and APP Launcher

      User Guide
      This Webpage

      In those service tabs, "Scan QRCode, in mobile device" or "Click the button, in this device" to open webpage or APP-related operations.
      QRCode

      Visitors

      • Visitors : 8,368,935
      • Hits : 8,553,638
      • Depth : 102.2 %
      • YamPiz Hero Blog
        This service architecture and content service provider.
      • Auto Platform
        For better browsing experience, it will auto detects your device to display webpage.
      • Bug Report
        Tell us about the idea, problem and errors you found.
      • Comodo Secure
        The sensitive data transmission adopts by SSL-2048 authenticated encryption.
      • Copyright
        © 2009 YamPiz Digital Inc. & Jaby Group. All rights reserved.
      • Revised Version
        V2.2.210
        10 Mar 2025 (GMT+8)