Ext Button的onClick和handler

在EXT中，当我们要为按钮点击添加处理function的时候，可以看到一般人的实现分成2类：

1.使用onClick: function xx()

2.使用handler: function xx()

 

完成后，我们会发现，无论用哪一种实现，再点击按钮时都能触发xx这个function. 那么有人就会考虑，为什么EXT提供了2个功能一样的东西，或者说这2种方式有哪些细微的不同？

 

首先有一点需要明确，在Button中，onClick是一个方法，而handler是一个配置项。

接着，为了明确这2种方式本质上的区别，我们查看Button的源码：

 

 

Js代码 // private   

1.     onClick : function(e){   
2.             ......一系列其他无关的代码   
3.             if(this.handler){   
4.                 //this.el.removeClass('x-btn-over');   
5.                 this.handler.call(this.scope || this, this, e);   
6.             }   
7.         }   
8.     },  

// private
    onClick : function(e){
            ......一系列其他无关的代码
            if(this.handler){
                //this.el.removeClass('x-btn-over');
                this.handler.call(this.scope || this, this, e);
            }
        }
    },

 

源码中可以看到，handler在onClick的实现中被调用。进一步分析，我们点击按钮的时候，又是如何会调用onClick的？看下面一段源码：

 

Js代码  

1. // private   
2.     initButtonEl : function(btn, btnEl){   
3.        ......一系列无关的代码   
4.         if(this.repeat){   
5.            ......一系列无关的代码   
6.             this.mon(repeater, 'click', this.onRepeatClick, this);   
7.         }else{   
8.             this.mon(btn, this.clickEvent, this.onClick, this);   
9.         }   
10.     },  

// private
    initButtonEl : function(btn, btnEl){
       ......一系列无关的代码
        if(this.repeat){
           ......一系列无关的代码
            this.mon(repeater, 'click', this.onRepeatClick, this);
        }else{
            this.mon(btn, this.clickEvent, this.onClick, this);
        }
    },

在初始化button的el的时候，Ext通过this.mon将 'click'事件和onClick绑定在了一起。（注：这里mon方法是Ext3.x中对on方法的升级版，为了防止内存泄漏之类的）。

 

综上，整个流程便是：  Button实例化——> 'click'事件 ——>this.onClick——>this.handler

因此，我们配置了handler，在按钮点击的时候，自然会被触发。然而另一种方式写了onClick之后哦，this.handler会失效。onClick的方式是对EXT源码的重写和覆盖，而不是调用，会破坏EXT按钮中原有的逻辑。

同时可以注意到，onClick在源码中是被标注为//private的，API中也查不到这个方法。所以在实现按钮的点击事件的时候，我们应该使用handler这个配置项，而不是重写onClick方法。