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

<span id="testSpan" onclick="alert('span')">
 内嵌button<br> 
<input type="button" id="btn" onclick="alert('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事件的方法有几种。

1. Ext.getCmp('backBtn').getEl().dom.click(); // 相当于点击了一次button 如果无阻止，事件会冒泡
2. Ext.getCmp('backBtn').onClick()    //要有参数e  e.button 会报错 因此不可行

    

3. 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); }