BrilliantStar

走路 行心 修缘

  • 博客访问: 672741
  • 博文数量: 182
  • 用 户 组: 普通用户
  • 注册时间: 2013-02-05 14:37
  • 认证徽章:
个人简介

走路 行心 修缘(需要交流的请加我的QQ 273936024)

ITPUB论坛APP

ITPUB论坛APP



APP发帖 享双倍积分

文章分类

全部博文(182)

文章存档

2017年(47)

2016年(39)

2015年(20)

2014年(33)

2013年(42)

微信关注

IT168企业级官微



微信号:IT168qiye



系统架构师大会



微信号:SACC2013

订阅
热词专题
Ext.js4.2.1 事件机制 2017-08-10 16:25:51

分类: 开源技术

一: 简介

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.         //test.on("click", function() {
  8.         //    alert("handler2");
  9.         //});

  10.         Ext.define('People', {
  11.             config : {
  12.                 name : ''
  13.             },
  14.             //extend : Ext.util.Observable,
  15.             mixins : {
  16.                 observable : 'Ext.util.Observable'
  17.             },
  18.             info : function(event) {
  19.                 return this.name + " is " + (event ? "ing" : "doing nothing");
  20.             },
  21.             constructor : function(config) {
  22.                 var me = this;
  23.                 me.addEvents({
  24.                     'walk' : true,
  25.                     'eat' : true
  26.                 });

  27.                 me.initConfig(config);
  28.                 me.mixins.observable.constructor.call(this, config);
  29.             }
  30.         });

  31.         var people = Ext.create("People", {
  32.             name : "Alex"
  33.         });

  34.         people.on("walk", function() {
  35.             this.state = "walk";
  36.             Ext.Msg.alert("event", this.name + " is walking");
  37.         });

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

  43.         test.on("click", function() {
  44.             people.fireEvent("walk");
  45.         });

  46.         test2.on("click", function(e) {
  47.             alert(this.getX()+" , "+this.getY());
  48.             alert(e.getTarget().value);
  49.             people.fireEvent("eat");
  50.         });
  51.     });

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


阅读(32) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册