ext基礎架構-事件機制三

1、 Easy-Ext 第六講 Ext基礎架構_事件機制（三）講師：白鶴翔Easy-Ext 我們所熟悉的事件嗯！對于事件，相信你一定不陌生。我們直接追溯到原始的事件模型，也就是0級DOM事件模型。非常通俗的說，就是給HTML元素里加一個事件，這種方法有一個硬傷，就是不能同時對元素注冊多個處理函數(shù)。好吧，W3C的專家也知道這樣不好，那么2級DOM事件模型也就產生了，也就是所謂的標準事件模型。API如下定義：element.addEventListener(type,listener,useCapture);element.removeEventListener(type,listener,useCa

2、pture);好吧，這又牽扯到了事件流，也就是事件的傳播。W3C的專家把事件分成了3個階段：（1）捕獲 （2）目標 （3）冒泡，相信你也知道這三個階段。好吧，事件對象（event）這個對象是W3C的標準。但是IE他不支持，只能用window.event去獲取。這里又引出了一個最頭痛的問題，就是瀏覽器差異。對于一些相關的問題我在這里不進行講解了。Easy-Ext 高級事件 基本事件是什么？就類似于click、keypress、focus、mouseover等這些事件都是瀏覽器定義好的內置事件，我們直接使用即可。對于高級事件，無非就是自己去設計一個事件，就比如我們實際項目中，通常都伴隨些業(yè)務邏輯，

3、可能是曾刪改查等.這些事件都是非原生事件，也就是瀏覽器無法自行判別觸發(fā)的。但是我們確實有需求去實現(xiàn)他們，從而讓我們開發(fā)起來更爽一些。對于如何實現(xiàn)自定義事件，我們還是要了解標準事件的使用原理，然后做一個簡單的分析，考慮3點：如何注冊事件？如何觸發(fā)事件？如何刪除事件？其實瀏覽器的事件內部使用的是javascript經典的觀察者模式去實現(xiàn)的，那么我們也可以模擬一個觀察者模式，為自己設計事件！Easy-Ext高級事件 設計分析：首先我們需要一個事件的定義者，類似瀏覽器一樣能自動分辨出所觸發(fā)的任意內置事件，我們叫他Observable，他是我們要定義的類；然后應該有一個觸發(fā)事件的對象(就類似瀏覽器里的元

4、素)，也就是事件源，這個類可以是Observable的子類，我們可以暫時不去管它。第二，Observable這個對象的實例可能會有多個可以觸發(fā)的事件，我們隨意定義2個自己的事件 開始 star、停止 stop，這2個自定義的事件名稱也就是我們要進行的事情。這2個事件名稱必須要屬于Observable這個類。第三，因為僅僅定義名稱是不行的，需要為自己定義的事件名稱綁定相關的函數(shù)，當然函數(shù)可以是多個（一個事件可以綁定多個函數(shù)）然后去執(zhí)行他們。你需要有一個數(shù)據結構負責維護事件名稱與所綁定函數(shù)直接的關系。第四，新增事件類型，也就是去添加你自己的事件名稱第五，添加監(jiān)聽函數(shù)，也就是做一個事件名稱與函數(shù)的綁

5、定方法第六，響應的也應該有一個移除事件的方法。第七，觸發(fā)事件。嗯，就是調用這個事件名稱所對應的所有函數(shù)即可。最后，我們可以給函數(shù)起一個別名，從而方便去使用。Easy-Ext高級事件 嗯。如果你閱讀過Ext源碼，應該知道這就是Ext底層關于Ext.util.Observable的核心設計思路。只不過我們做的比較簡陋。沒有Ext那么健壯而已。Easy-Ext事件工具類 嗯，如果你曾搞過瀏覽器兼容問題，對于事件，你一定知道怎么屏蔽瀏覽器的差異。很顯然我們需要一個事件管理類，用于屏蔽一切瀏覽器差異。這個類我們叫他EventManger，很霸氣的名字，和Ext的類名稱一致這么做的目的只有1個：就是為了屏

6、蔽瀏覽器差異。嗯，簡單做了實現(xiàn)之后，我們知道通過這樣的靜態(tài)工具類，非常的好用，那么這也是Ext.EventManger的核心設計思路。Easy-ExtExt的事件系統(tǒng) 之前我們設計了2套機制，一套機制做了對自定義事件的處理，另一套機制做了對原生瀏覽器事件的差異處理。如果我們現(xiàn)在有一個需求，就是點擊一個按鈕，然后觸發(fā)一個自定義的事件，那該如何去做呢？答案：很簡單，就是把這兩套系統(tǒng)綜合起來，無非就是點擊按鈕的時候里面調用一下自己所定的事件fire方法即可。對于Ext來說，他的事件機制的核心設計就是我們模擬的這2套機制。簡單做一個說明：Ext的事件分為瀏覽器事件和自定義事件。通過Observable

7、接口提供一套完全自定義的事件機制，然后再通過EventManger事件工具類對原生事件的一次封裝，屏蔽了瀏覽器之間的差異。最后保證Observable、EventManager他們倆套機制暴露出完全相同的接口，這倆套機制相互配合使用，相互并行。你可以隨意的通過on、un方法綁定原生事件或自定義事件來完成事件的處理。從而實現(xiàn)了非常強大的功能。Easy-ExtExt事件使用 熟練使用Ext事件：為底層元素注冊事件：on、un方法使用：Ext.EventManager.on（el，eventName，fn，scope ,options.）常用options：preventDefault、stopPr

8、opagation、delay、singleExt.EventManager.un（同上）三種綁定事件的方式：Ext.EventManager.on(el，ename，fn);Ext.EventManager.on(el，ename1：fn1，ename2：fn2);Ext.EventManager.on(el，ename1:fn:fun,ename2:fn:fun);Easy-ExtExt事件使用 為Ext的UI組件綁定事件ex005：兩種形式：在listeners里注冊事件、單獨為組件批量注冊事件Easy-ExtExt事件使用 使用Ext的自定義事件，嗯！之前我們已經自己用觀察者模擬了簡陋的自定義事件。了解了原理之后，那么我們看看Ext應該如何使用自定義事件的，也就是傳說中的Ext.util.Observable簡單的自定義事件。為自定義的類提供事件的支持。Easy-ExtExt事件使用 Ext.util.Observable類的其他使用ex007: 單次運行監(jiān)聽器的使用，single配置項在組件中的用途ex008：對于事件的掛起和恢復實例ex009：事件的轉發(fā)機制Easy-ExtExt事件使用 我們最后對于Ext事件做一個總結。Ext的事件主要做了三