原文地址:http://blog.csdn.net/smilingleo/article/details/3733177
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生效。