ExtJS里handler和listener都是用来对用户的某些输入进行处理的,有必要区分一下各自都是怎么用的。 

Handler

handler与Action相关联,一个Action可以有多个Component引用;

Action是一个可被共享的对象,有五个主要的属性:text, handler, iconCls, disabled, hidden

component的构建方式比较有意思:

new Ext.Button(action)

是Button接收一个Action对象作为构造参数吗?但是查看Button的API却没有发现action属性。反而Button的构造参数是一个(Object config),也就是说,只是一个配置对象(包含各种属性),而Action的五个属性正好Button也都有,所以,可以接收一个Action来进行构造。

其他属性不考虑,看handler,Button中的handler配置项文档说明,这个handler是与click Event关联的。也就是说,click是Button这个Component的首要Event(参考Action中handler的文档),这就是Handler的运行方式:被某个组件的首要Event所触发。 

Listener

上面说了handler是对首要Event的响应函数,而关于Event, Observable才是根源。

Ext.util.Observable是一切可进行事件监测之对象的父类(或者接口)。Observable只有一个配置项,那就是listeners,而一个listener是一个事件名 + 处理函数的组合,如:

"click" : function(){...}, "mouseOver" : function(){....}

Observable还提供了很多相关的处理事件的方法,比如添加事件,触发事件,移除监听器等等。 

由上分析可以总结一下:

1、handler是一个特殊的listener;

2、handler是一个函数,而listener是<event , 函数>对;

3、handler与Action相关,用来让多个组件共享一个Action。而listener与Event相关,可以对Event进行方便的管理; 

但是handler与普通的event + listener组合还是有一些不同,一个例子就是,如果用

Ext.util.Observable.capture(button, function(name){ if (name=="click") return false})

来事先捕获click事件,并阻止click时,如果Button的click是通过handler来响应的,则capture的return false函数无效,而如果button是定义了包含click事件的listener,则上面的capture生效。