当前位置: 代码迷 >> JavaScript >> extJs 2.0学习札记(事件注册总结篇)
  详细解决方案

extJs 2.0学习札记(事件注册总结篇)

热度:87   发布时间:2012-11-23 00:03:43.0
extJs 2.0学习笔记(事件注册总结篇)

本来,我也没把这档子事放在眼里,因为简单,例如:
  Ext.get("elem").on("click",{fn:function(){alert("此元素被单击了!");}};

  这样的代码谁不会写啊。一个on就了结了。但是,今天,我在研究Ext.Panel的tbar时,发现,那现工具栏按钮的事件注册不一样:

  元素注册、组件注册都是:{fn:……}

  工具栏按钮的事件注册:{handler:……}

  嘿,我就在想,为什么Ext的作者就不统一一下呢,都是fn多好。省得我分心了。一不小心准搞错了。还好,不是fn就是handler,凡是工具栏上面的东西注册事件,一般都是用handler,平常组件注册事件统统都用fn。

  关于组件的事件注册,一般都是创建时就定义好,而不是创建后再来on。所以,用extjs写程序,常常看到Ext.onReady里面嵌套了无数层,items里面还有items,items里面还有listeners。然后listeners里面定义事件处理器。这样,代码就比较难看了。有人说:extJs写的代码莫名其妙。呵呵,可见大伙不大喜欢这种写法啊。

  关于事件处理,我把Element的API文档翻译了一下。事实上事件注册都是建立在Element之上的。

  一、元素的事件注册
  on( String eventName, Function fn, [Object scope], [Object options] ) : void
  其中:
??? eventName:String
  事件名称
  fn:Function
    事件处理函数,它有三个参数
    evt:EventObject 事件对象
    t:Element    事件发生的目标Element,注意:它将被delegate选项所筛选(很有用)。
    o:Object     addListener函数传入的options对象。

  scope:Object 范围
  options:Object 选项参数
  一个包含了事件配置属性的对象,它可能包括如下属性:
  scope {Object} :它表示事件处理函数的执行范围,即处理函数时面的this的上下文。
  delegate {String} :一个简单的selector,用于过滤target或者找target的子孙。
  stopEvent {Boolean} :为true就停止事件,即停止事件的传播和阻止默认行为。
  preventDefault {Boolean} :阻止默认行为
  stopPropagation {Boolean}:停止事件的传播
  normalized {Boolean} : 为false的话就传递一个浏览器的原装事件对象给函数,而不是Ext.EventObject。
  delay {Number} : 这个值表示事件发生后多少毫秒,事件处理函数才被执行。
  single {Boolean} : 为真的话呢就表示这个事件处理器只执行一次,之后自删除。
  buffer {Number} :它的作用就是执行缓冲,有时候,用户点按钮做死的点,一秒点它几十次,难道让事件处理函数执行几十次吗?其实,用户并不一定是执行多次。如果真的就这样老老实实执行了,很可能就坏事了,做了无用功。
  这个值表示,在事件发生后,事件处理函数将放到Ext.util.DelayedTask中去计划执行,多少毫秒之内,如果再次发生同一事件,那么,这一事件将覆盖原来的事件。只执行后面那一次,当然,那个缓冲时间也在后一次时被刷新。


  组合Options中的选项
  在下面的例子中,on这种快捷的方式比冗长的addListener好用的多了。两者是等价的。使用Options作参数,它能组合多种不同的事件处理器:
  一个普通的,能延时执行的,只执行一次的,能自动停止事件的,还有一个自定义参数(forumId)在options对象,这个Options对象是合法的。代码如下:

el.on('click', this.onClick, this, {
??? single: true,
??? delay: 100,
??? stopEvent : true,
??? forumId: 4
});

  一次注册多个事件
  这个方法也允许只传一个config,但是一个config中包含多个事件处理信息。代码如下:
el.on({
??? 'click' : {
??????? fn: this.onClick,
??????? scope: this,
??????? delay: 100
??? },
??? 'mouseover' : {
??????? fn: this.onMouseOver,
??????? scope: this
??? },
??? 'mouseout' : {
??????? fn: this.onMouseOut,
??????? scope: this
??? }
});
或者是以下简捷语法:
el.on({
??? 'click' : this.onClick,
??? 'mouseover' : this.onMouseOver,
??? 'mouseout' : this.onMouseOut,
??? scope: this
});

?

  上面是一般事件,还有快捷键注册的问题,事实上,Ext对快捷键这个功能的封装其实就是对keypress这个事件的改造。怎样定义快捷键映射呢,Ext.Element.addKeyMap(config)。所以,问题的重心又到了config这个东西了。我找到Ext.KeyMap这个类,研究一下:
  config的属性有:
  key:number/string/Array,例如:
    key: 13, // or Ext.EventObject.ENTER
    key: "a\r\n\t"
    key: [10,13],    //回车键被按了
    key: "abc"     //按了a或b或c
    key: "\t"
    由上可知,可以是设成单个按键,也可是多个按键,可是ascii码,也可以是那个字母。
  fn:Function
    相关联的处理函数,例如:
    fn: function(){ alert("Return was pressed"); }
  ctrl:Boolean
  shift:Boolean
  Alt:Boolean
  scope:Object

  

  总结上面,Element中的事件注册方法都差不多。

?

  二、关于组件上的事件注册
  组件的事件注册有它的特点了,尽管本质上还是on、un。如果用on、un,它的语法跟Element的语一样,没什么差别,关键是,组件允许在创建时的 config中用listeners:{xxx:{},yyyy:{}}的形式的注册事件。不过,listeners里面的写法跟on的组合写法是一样的。这个我研究了。例如:
  listeners:{'select': {fn:this.sortImages, scope:this}}
  还是:事件名:options
  
  组件没有什么快捷键关联的功能,不过,能通过元素的快捷键注册功能来得到。这个没什么问题。Ext.Window

有一个Keys config的属性,用它可以定义快捷键。

  相关解决方案