Extjs: Difference between listner and handler

While working with Extjs. In most of the components i defined the handler which can fire an  Event.
Will enplane the button Events as

Handler:  handler is associated with a Component Action. click the component is the primary event Event of the button. this will handles the Handler's operation, it is the Component of the first Event responsive function on the Event.

     xtype: 'button',

            id:'btnTestEvents',

            text: 'Test Events',

            handler: function () {

            Ext.Msg.show({

                     title: 'Events Test Confirmation',

                     msg: 'Test message',

                     buttons: Ext.Msg.YESNO,

                     icon: Ext.Msg.QUESTION,

                     fn: function(btn) {

                       switch (btn) {

                         case "yes":

                               //do something

                               break;

                          case "no":

                               break;

                                  }

                                      }

            });

}

Listener: Listner is the maily event handler and combination. Examples of button events like "Click", "focus", "blur".
Event associated with the listener, can be easily Event Management.

     xtype: 'button',

            id:'btnTestEvents',

            text: 'Test Events',

            listeners: {

                     click: function( field, e, eOpts )

                                            {

                               },
                     focus: function(field, event, eOpts )

                                            {

           

                             }

}