EXT按钮事件
1.使用onClick: function xx()
2.使用handler: function xx()
?
完成后，我們會(huì)發(fā)現(xiàn)，無(wú)論用哪一種實(shí)現(xiàn)，再點(diǎn)擊按鈕時(shí)都能觸發(fā)xx這個(gè)function. 那么有人就會(huì)考慮，為什么EXT提供了2個(gè)功能一樣的東西，或者說(shuō)這2種方式有哪些細(xì)微的不同？
?
首先有一點(diǎn)需要明確，在Button中，onClick是一個(gè)方法，而handler是一個(gè)配置項(xiàng)。
接著，為了明確這2種方式本質(zhì)上的區(qū)別，我們查看Button的源碼：
// private
??? onClick : function(e){
??????????? ......一系列其他無(wú)關(guān)的代碼
??????????? if(this.handler){
??????????????? //this.el.removeClass('x-btn-over');
??????????????? this.handler.call(this.scope || this, this, e);
??????????? }
??????? }
??? },
?
源碼中可以看到，handler在onClick的實(shí)現(xiàn)中被調(diào)用。進(jìn)一步分析，我們點(diǎn)擊按鈕的時(shí)候，又是如何會(huì)調(diào)用onClick的？看下面一段源碼：
?
// privateinitButtonEl : function(btn, btnEl){......一系列無(wú)關(guān)的代碼if(this.repeat){......一系列無(wú)關(guān)的代碼this.mon(repeater, 'click', this.onRepeatClick, this);}else{this.mon(btn, this.clickEvent, this.onClick, this);}},?在初始化button的el的時(shí)候，Ext通過(guò)this.mon將 'click'事件和onClick綁定在了一起。（注：這里mon方法是Ext3.x中對(duì)on方法的升級(jí)版，為了防止內(nèi)存泄漏之類的）。
?
綜上，整個(gè)流程便是： ?Button實(shí)例化——> 'click'事件 ——>this.onClick——>this.handler
因此，我們配置了handler，在按鈕點(diǎn)擊的時(shí)候，自然會(huì)被觸發(fā)。然而另一種方式寫了onClick之后哦，this.handler會(huì)失效。onClick的方式是對(duì)EXT源碼的重寫和覆蓋，而不是調(diào)用，會(huì)破壞EXT按鈕中原有的邏輯。
同時(shí)可以注意到，onClick在源碼中是被標(biāo)注為//private的，API中也查不到這個(gè)方法。所以在實(shí)現(xiàn)按鈕的點(diǎn)擊事件的時(shí)候，我們應(yīng)該使用handler這個(gè)配置項(xiàng)，而不是重寫onClick方法。
handler與listener的區(qū)別ExtJS里handler和listener都是用來(lái)對(duì)用戶的某些輸入進(jìn)行處理的，有必要區(qū)分一下各自都是怎么用的。
?
Handler
handler與Action相關(guān)聯(lián)，一個(gè)Action可以有多個(gè)Component引用；
Action是一個(gè)可被共享的對(duì)象，有五個(gè)主要的屬性：text, handler, iconCls, disabled, hidden
component的構(gòu)建方式比較有意思：
new Ext.Button(action)
是Button接收一個(gè)Action對(duì)象作為構(gòu)造參數(shù)嗎？但是查看Button的API卻沒(méi)有發(fā)現(xiàn)action屬性。反而B(niǎo)utton的構(gòu)造參數(shù)是一個(gè)(Object config)，也就是說(shuō)，只是一個(gè)配置對(duì)象（包含各種屬性），而Action的五個(gè)屬性正好Button也都有，所以，可以接收一個(gè)Action來(lái)進(jìn)行構(gòu)造。
其他屬性不考慮，看handler，Button中的handler配置項(xiàng)文檔說(shuō)明，這個(gè)handler是與click Event關(guān)聯(lián)的。也就是說(shuō)，click是Button這個(gè)Component的首要Event（參考Action中handler的文檔），這就是Handler的運(yùn)行方式：被某個(gè)組件的首要Event所觸發(fā)。
?
Listener
上面說(shuō)了handler是對(duì)首要Event的響應(yīng)函數(shù)，而關(guān)于Event, Observable才是根源。
Ext.util.Observable是一切可進(jìn)行事件監(jiān)測(cè)之對(duì)象的父類（或者接口）。Observable只有一個(gè)配置項(xiàng)，那就是listeners，而一個(gè)listener是一個(gè)事件名 + 處理函數(shù)的組合，如：
"click" : function(){...}, "mouseOver" : function(){....}
Observable還提供了很多相關(guān)的處理事件的方法，比如添加事件，觸發(fā)事件，移除監(jiān)聽(tīng)器等等。
?
由上分析可以總結(jié)一下：
1、handler是一個(gè)特殊的listener；
2、handler是一個(gè)函數(shù)，而listener是<event , 函數(shù)>對(duì)；
3、handler與Action相關(guān)，用來(lái)讓多個(gè)組件共享一個(gè)Action。而listener與Event相關(guān)，可以對(duì)Event進(jìn)行方便的管理；
?
但是handler與普通的event + listener組合還是有一些不同，一個(gè)例子就是，如果用
Ext.util.Observable.capture(button, function(name){ if (name=="click") return false})
來(lái)事先捕獲click事件，并阻止click時(shí)，如果Button的click是通過(guò)handler來(lái)響應(yīng)的，則capture的return false函數(shù)無(wú)效，而如果button是定義了包含click事件的listener，則上面的capture生效。
按鈕事件<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">
Ext.onReady(function(){var buttonName = new Ext.Button({id:"buttonName",text:"這是一個(gè)按鈕",//tooltip:"提示信息：Button組件基本用法",//提示信息,如果需要顯示提示信息，需要使用Ext.QuickTips.init();//tooltipType:"title", //定義顯示提示信息的類型，有qtip和title兩種方式，默認(rèn)是qtiptype:"button", //按鈕類型：可以是submit, reset or button 默認(rèn)是 button//autoShow:true, //默認(rèn)false,自動(dòng)顯示// hidden:false, //默認(rèn)false，是否隱藏//hideMode:"offsets", //隱藏方式，默認(rèn)display,可以取值：display，offsets，visibility//cls:"cssButton", //樣式定義,默認(rèn)""//disabled:false, //是否可用，默認(rèn)false// disabledClass:"", //默認(rèn)x-item-disabled//enableToggle:true, //默認(rèn)false//pressed:false, //設(shè)置按鈕是否已經(jīng)被按下，默認(rèn)是false//html:"Ext",//默認(rèn)""// handleMouseEvents:true, //默認(rèn)true,如果為false,那么mouseout mouseover就不能被觸發(fā)//x:number,y:number,在容器中的x,y坐標(biāo)handler:function(){Ext.Msg.alert('提示消息框','測(cè)試Button組件：handler事件！');},//添加事件listeners:{//添加監(jiān)聽(tīng)事件 可以結(jié)合handler測(cè)試這兩個(gè)事件哪個(gè)最先執(zhí)行"click":function(){Ext.Msg.alert('提示消息框','測(cè)試Button組件：listeners事件！');//Ext.getCmp("buttonName").hide();//隱藏按鈕}},//cls:"x-btn-text-icon",//添加圖標(biāo)前需要設(shè)置該屬性//icon:"house.gif", //圖標(biāo)的地址//plugins : Object/Array 擴(kuò)展插件時(shí)使用// repeat:false, //默認(rèn)false ,如果為true,需要設(shè)置mouseover事件renderTo:Ext.getDom("hello") //將組件的顯示效果渲染到某個(gè)節(jié)點(diǎn)的ID});});</script>
</head></head>
<body>
<div id="hello"></div></body>
</html>注意：handler注釋才會(huì)listeners，不然只會(huì)handler?
ETX系列：
EXT基礎(chǔ)
EXT表單
EXT表格
EXT事件
EXT窗口
EXT按鈕事件
總結(jié)
- 上一篇： 我的世界鞘翅怎么飞?
- 下一篇： EXT iconCls说明