Ext.js4.2.1 事件機制

百聯達發表於2017-08-10
JS事件
一： 簡介

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.         //});

  8.         //test.on("click", function() {
  9.         //    alert("handler2");
  10.         //});

  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.                 });

  30.                 me.initConfig(config);
  31.                 me.mixins.observable.constructor.call(this, config);
  32.             }
  33.         });

  35.         var people = Ext.create("People", {
  36.             name : "Alex"
  37.         });

  39.         people.on("walk", function() {
  40.             this.state = "walk";
  41.             Ext.Msg.alert("event", this.name + " is walking");
  42.         });

  44.         people.on("eat", function() {
  45.             this.state = "eat";
  46.             
  47.             Ext.Msg.alert("event", this.name + " is eating");
  48.         });

  50.         test.on("click", function() {
  51.             people.fireEvent("walk");
  52.         });

  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("提示", "你按了空格鍵！");
    }
});


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28624388/viewspace-2143356/，如需轉載，請註明出處，否則將追究法律責任。

相關文章