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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/28624388/viewspace-2143356/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/28624388/viewspace-2143356/