extjs 中 给组件添加click 事件是怎么关联到dom事件的？

Question

 

var element = Ext.get('domid');
var component = Ext.getCmp('domid')

 各添加一个click事件

element.on('click',function(){});
component.on('click',function(){});

 
extjs源码中显示这两种添加事件方式是不同的。

给element上添加事件会最终把事件绑定到dom元素上（最终是调用addEventListener or attachEvent)

但是component添加事件只是记录了事件和回调函数的关系，然后fireEvent之后依次调用，并没有涉及到给dom元素添加事件。

但是费解的是当你给component添加click时间的时候，却是可以触发的。

不解。。。

以下是 component 添加事件的行为（使用Observable的

addListener)

 

 

 

 addListener : function(eventName, fn, scope, o){
        var me = this,        e,          oe,            isF,        ce;
        if (ISOBJECT(eventName)) {
            o = eventName;
            for (e in o){
                oe = o[e];
                if (!me.filterOptRe.test(e)) {
                    me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
                }
            }
        } else {
            eventName = eventName.toLowerCase();
            ce = me.events[eventName] || TRUE;
            if (Ext.isBoolean(ce)) {
                me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
            }
            ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
        }
    }

 这是 element添加事件的代码（使用EventManager的addListener，最终会添加click事件到dom上）

 addListener : function(eventName, fn, scope, options){
        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);
        return this;
    }

 

 

 

 

 

 

Answer 1

element.on('click',function(){});

事件会最终把事件绑定到dom元素上

component.on('click',function(){});

事件已经在你NEW一个COMPONENT时绑定到DOM元素上了，只是这些绑定的事件是不允许使用者去修改的，否则的话EXTJ的COMPONENT可能就没法正常运转
在NEW 一个COMPONENT时，EXTJS通过DOM元素的事件包装成了自己使用的一整套事件，这些事件就是在EXTJS API文档里可以查询到的
当你

component.on('click',function(){}); 时就是把一个事件绑定到EXTJS的组件上而不是DOM元素上;