Ext Button的onClick和handler

最新推荐文章于 2022-12-06 18:04:01 发布

最新推荐文章于 2022-12-06 18:04:01 发布 · 568 阅读

文章标签：

#EXT

Ext 专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了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的源码：

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

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

// 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方法。