Ext.js4.2.1中事件機制的示例分析

這篇文章主要為大家展示了“Ext.js4.2.1中事件機制的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Ext.js4.2.1中事件機制的示例分析”這篇文章吧。

一： 簡介

Ext中的事件遵循樹狀模型，和事件相關的類主要有這么幾個：Ext.util.Observable,Ext.lib.Event,Ext.EventManager和Ext.EventObject.
Ext使用Ext.lib.Event,Ext.EventManager和Ext.EventObject對原生瀏覽器事件進行了封裝，最后給我們用的是一套統一的跨瀏覽器的通用事件接口。

二：Ext.util.Observable

Ext.util.Observable在Ext事件模型中有舉足輕重的地位，位于Ext組件的頂端，為Ext組件提供處理事件的最基本功能。所有繼承自Ext.util.Observable類的控件都可以支持事件。

1. Ext.onReady(function() {
   

2.         var test = Ext.get("test");
   

3.         var test2 = Ext.get("test2");
   

4.         //test.on("click", function() {
   

5.         //    alert("handler1");
   

6.         //});
   

7. 
   

8.         //test.on("click", function() {
   

9.         //    alert("handler2");
   

10.         //});
    

11. 
    

12.         Ext.define('People', {
    

13.             config : {
    

14.                 name : ''
    

15.             },
    

16.             //extend : Ext.util.Observable,
    

17.             mixins : {
    

18.                 observable : 'Ext.util.Observable'
    

19.             },
    

20.             info : function(event) {
    

21.                 return this.name + " is " + (event ? "ing" : "doing nothing");
    

22.             },
    

23.             constructor : function(config) {
    

24.                 var me = this;
    

25.                 me.addEvents({
    

26.                     'walk' : true,
    

27.                     'eat' : true
    

28.                 });
    

29. 
    

30.                 me.initConfig(config);
    

31.                 me.mixins.observable.constructor.call(this, config);
    

32.             }
    

33.         });
    

34. 
    

35.         var people = Ext.create("People", {
    

36.             name : "Alex"
    

37.         });
    

38. 
    

39.         people.on("walk", function() {
    

40.             this.state = "walk";
    

41.             Ext.Msg.alert("event", this.name + " is walking");
    

42.         });
    

43. 
    

44.         people.on("eat", function() {
    

45.             this.state = "eat";
    

46.             
    

47.             Ext.Msg.alert("event", this.name + " is eating");
    

48.         });
    

49. 
    

50.         test.on("click", function() {
    

51.             people.fireEvent("walk");
    

52.         });
    

53. 
    

54.         test2.on("click", function(e) {
    

55.             alert(this.getX()+" , "+this.getY());
    

56.             alert(e.getTarget().value);
    

57.             people.fireEvent("eat");
    

58.         });
    

59.     });

三：Ext.lib.Event

Ext.lib.Event是一個工具類，實際中很少直接用到這個類，只是與事件相關的那些操作最后都會歸結為對這些底層函數的調用。
getX(),getY(),getXY()獲得發生的事件在頁面中的坐標位置。

getTarget() 返回事件的目標元素。

preventDefault() 用于取消瀏覽器當前事件所執行的默認操作，比如阻止頁面跳轉。

stopPropagation() 停止事件傳遞。

stopEvent() 相當于調用preventDefault()和stopPropagation()兩個函數

四：Ext.EventManager

Ext.EventManager 作為事件管理器，定義了一系列事件相關的處理函數，其中最常用的就是onDocumentReady和onWindowResize

Ext.onReady()就是Ext.EventManager.onDocumentReady()的簡寫形式，它會在頁面文檔渲染完畢

五：Ext.EventObject

Ext.EventObject是對事件的封裝，它提供了豐富的工具函數，幫助我們獲得事件相關的信息。通過Ext.EventObject幫助文檔可以了解到，它包含的許多函數都與Ext.lib.Event中的函數功能是相同甚至同名的，如getPageX()、getPageY()、getPageXY()和getTarget()等，這些函數實際上都是通過Ext.lib.Event實現的。


Ext.EventObject對Ext.lib.Event擴展的部分是對鼠標事件和按鍵事件的增強，定義了一系列按鍵，可以用來判斷某個鍵是否被按下：


Ext.get("text").on("keypress", function (e) {
    if (e.getKey() == Ext.EventObject.SPACE) {
        Ext.Msg.alert("提示", "你按了空格鍵！");
    }
});

以上是“Ext.js4.2.1中事件機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！