handler与listener的区别

拼搏现实的明天。 2022-08-10 11:47 172阅读 0赞

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生效。