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的属性，用它可以定义快捷键。