首頁 > 開發者 > 網站開發

ExtJS學習之道：ExtJs事件（自訂事件、on、eventManager）樣本

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

頁面代碼：

[javascript] view plaincopyprint?
  1. <body>  
  2.         <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  3.         <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>  
  4.         <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>  
  5.         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">  
  6.             事件使用例子，包括自訂事件及on、addListener和EventManager的使用。  
  7.         </div>  
  8.         <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">  
  9.             滑鼠移到我試試！  
  10.         </div>  
  11.         <br>  
  12.         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">  
  13.             <input type="button" name="button1" id="button1" value="點我" />   
  14.         </div>  
  15.         <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>  
  16.     </body>  

 

js代碼

[javascript] view plaincopyprint?
  1. /**************************************** 
  2.  * 自訂事件使用 
  3.  */  
  4. var Person = function(){  
  5.     // 註冊事件,該事件名字為：say  
  6.     this.addEvents("say");  
  7.     // 另外一種方式註冊多個事件  
  8.     this.addEvents({  
  9.         "run" : true,  
  10.         "see": false  
  11.     });  
  12. }  
  13. // Extjs裡的事件處理,只有繼承了Ext.util.Observable類才具有事件功能  
  14. Ext.extend(Person,Ext.util.Observable);  
  15.   
  16. // 定義相關執行的方法  
  17. var speak = function(){  
  18.     alert("I can speak!");  
  19. }  
  20. var run = function(){  
  21.     alert("I can run!");  
  22. }  
  23. var see = function(){  
  24.     alert("I can see the word!");  
  25. }  
  26.   
  27. var person = new Person();  
  28. // 將方法say綁定到事件say上。二者名字可以不一樣  
  29. person.on("say", speak);  
  30. person.on("run", run);  
  31. person.on("see", see);  
  32.   
  33. // 觸發事件，這裡只觸發了say和run。see事件沒有觸發就不會發生  
  34. person.fireEvent("say");  
  35. person.fireEvent("run");  
  36. /*****************************************/  
  37.   
  38. Ext.onReady(function() {  
  39.     // 返回的Element對象,不等價於document.getElementById(id)  
  40.     // Ext.getDom(id)才等價於document.getElementById(id)  
  41.     var eventTestDiv = Ext.get("eventTestDiv");  
  42.     // 通過EventManager來實現，也可以通過obj.addListener實現，見下面的例子  
  43.     Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){  
  44.         Ext.Msg.alert('資訊', 'Id：' + this.id + '<br>內容：' + this.innerHTML);  
  45.     });  
  46.     Ext.EventManager.addListener(eventTestDiv,"click",function(){  
  47.         Ext.Msg.alert('資訊', 'Id：' + this.id  
  48.             + '<br>name：' + this.name  
  49.             + '<br>value：' + this.value);  
  50.     });  
  51.     /** 
  52.      使用addListener的例子，第三個參數是指範圍，第四個參數是個配置選項 
  53.      有4個配置選項: 
  54.         delay{Number}： 觸發事件後處理函數延時執行的時間。(觸發事件多久後執行指定的函數)； 
  55.         scope{Object}： 事件處理函數執行時所在的範圍。處理函數“this”的上下文環境。(如果第3個參數設定了,此處可以省)； 
  56.         single{Boolean}： true代表為事件觸發後加入一個下次移除本身的處理函數。(事件觸發一次後，就被移走，以後再觸發該事件無效)； 
  57.         buffer{Number}: 若指定一個毫秒數會把該處理函數安排到Ext.util.DelayedTask延時之後才執行。如果事件在那個事件再次觸發，則原處理器控制代碼將不會 被啟用，但是新處理器控制代碼會安排在其位置。 
  58.         以下的配置未用過： 
  59.             delegate {String} : 一個簡易選擇符，用於過濾目標，或是尋找目標的子孫。 
  60.             stopEvent {Boolean} : true表示為阻止事件。即停止傳播、阻止預設動作。 
  61.             preventDefault {Boolean} : true表示為阻止預設動作。 
  62.             stopPropagation {Boolean} : true表示為阻止事件傳播。 
  63.             normalized {Boolean} : false表示對處理函數送入一個原始、未封裝過的瀏覽器對象而非標準的Ext.EventObject。 
  64.     */  
  65.     var button1 = Ext.get("button1");  
  66.     // addListener等價於on，on只是addListener的簡寫  
  67.     button1.addListener("click",function(){  
  68.         // 獲得實際傳遞參數值，前兩個參數是EventObject和Element，第三個是option選項對象  
  69.         var msg = '<br/>擷取選填參數資訊：<br/>選填參數個數：' + arguments.length + "<br/>";  
  70.         for(var i in arguments[2]) {  
  71.             msg += i + "：" + arguments[2][i] + "<br/>";  
  72.         }  
  73.         Ext.Msg.alert('資訊', '列印eventTestDiv的資訊：<br/><br/>Id：' + this.id  
  74.             + "<br/>" + msg  
  75.         );  
  76.     },eventTestDiv, {  
  77.         // 事件延遲觸發事件  
  78.         delay : 500,  
  79.         // 是否只觸發一次  
  80.         single: false,  
  81.         msg   : '我是追加的參數'  
  82.     });  
  83.     /** 
  84.      事件的幾種寫法（addListener和on是等價的）： 
  85.      var fn = function (){ 
  86.         // 這裡添加需要處理的邏輯 
  87.      }; 
  88.     // 第一種寫法 
  89.     button1.addListener("click",fn,button1); 
  90.     button1.addListener("mouseover",fn,button1); 
  91.      
  92.     //第二種寫法 
  93.     button1.on({ 
  94.         click     : fn, 
  95.         mouseover : fn, 
  96.         scope     : button1 
  97.     }); 
  98.    
  99.     //第三種寫法 
  100.     button1.on({ 
  101.         click     : {scope:button1, delay:3000, fn:fn}, 
  102.         mouseover : {scope:button1, delay:1000, fn:fn} 
  103.     }); 
  104.     */  
  105. })  

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
extjs timeline extjs template extjs pricing extjs charts extjs 4 extjs download sencha extjs
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More