ExtJS裡handler和listener都是用來對使用者的某些輸入進行處理的，有必要區分一下各自都是怎麼用的。

var _btnSearch = Ext.create('Ext.button.Button', {
    text: '查詢',
glyph: '[email protected]',
handler: function () {
        storeDoorPermission.load();
},
listener:{
        "click" : function(){
            storeDoorPermission.load();
 
}
    }
});

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