由HTML button的click事件联想到Ext Button的事件处理机制

liwenjie

<span id="testSpan" > 内嵌button<br> <input type="button" id="btn"  value="按钮" />方法 </span> <script> var btn=document.getElementById("btn"); btn.onclick();//只显示btn（1次alert） btn.click();//显示btn,span（2次alert） </script>    上述例子为转载

 
 
可见onclick只是引用了onclick的函数
而调用click方法相当于点击了按钮
 
对于Ext的button，要触发其click事件的方法有几种。

• Ext.getCmp('backBtn').getEl().dom.click(); // 相当于点击了一次button 如果无阻止，事件会冒泡
  
• Ext.getCmp('backBtn').onClick()    //要有参数e  e.button 会报错 因此不可行 
  
• Ext.getCmp('backBtn').handler();  //相当于onclick  js默认函数重载不必传入参数
  

Ext的button继承了Observer，因此可以注册事件及触发事件。
 
Ext button的Element注册了点击事件
initButtonEl : function(btn, btnEl){ ... btn.on(this.clickEvent, this.onClick, this); } 

当点击按钮时会调用onclick方法，而在onclick中Ext再次触发 Observer本身注册的click事件
onClick : function(e){ this.fireEvent("click", this, e); }