lightning component基於事件驅動模型來處理用戶界面的交互。這種事件驅動模型和js的事件驅動模型也很相似，可以簡單的理解成四部分：

1.事件源：產生事件的地方，可以是頁面中的輸入框，按鈕等等；

2.事件： 點擊，失去焦點，初始化等等；

3.事件對象：當在事件源觸發某個事件的時候，一般會產生一個事件對象，記錄著事件的事件源相關信息以及相關的事件信息；

4.事件處理程序（Event Handler）：對當前的事件進行程序的處理或者函數。

接下來回到lightning中。在lightning component使用 handler方式作為事件處理程序綁定事件，用來當某些事件發生後，可以反饋到綁定到事件處理程序上。事件通過javascript controller層的action來觸發執行。在事件觸發以前，我們可以設置attribute值用來作為參數傳遞。

事件Events 通過aura:event來聲明，聲明後所在的位置為aura目錄下，後綴名為.evt 如下圖所示。

事件類型分成兩類： component events 以及application events.官方推薦可以情況下盡量使用component events,後面的內容也是以component event進行說明，關於application events，感興趣的可以自行查看文檔。 event使用可以分成以下幾步。

一. 創建自定義Event

自定義事件頭部由aura:event作為開始， type可以為COMPONENT以及APPLICATION，type定義了當前的這個事件屬於component event還是application event。

事件還可以添加多個aura:attribute，執行此事件前可以先對這些attribute賦值來傳遞參數數據。在js後臺部分可以使用event.setParam(‘attributeName‘,attributeValue)方式對預裝載的參數賦值。

我們簡單聲明一個component event，名稱為 messageEvt,有一個attribute，名字是message,類型為String。

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event
 
>

以下的二、三步均需要寫在lightning component中，這裏創建了一個lighnting component:MessageEventComponent.

二. 註冊事件

創建完事件後需要在lightning component中進行註冊以後才可以進行接下來的使用。使用aura:registerEvent標簽進行註冊事件。

aura:registerEvent有兩個屬性，一個是name，一個是type。name是任意起的，這個name需要和後面提到的aura:handler中的name一致。 type為你的namespace + ‘:‘ + 事件名稱，這裏為c:messageEvt。整體如下所示：

<aura:registerEvent name="componentEvent" type="c:messageEvt"/>

三. 設置事件的處理程序(handler)

當我們註冊完事件以後，我們需要考慮當事件被觸發以後，要做什麽。所以這裏我們需要配置一下事件的handler部分，當事件觸發以後，我們讓他去執行controller的某個方法去進行業務邏輯的操作。配置handler需要使用aura:handler標簽，主要有幾個屬性：

name ： 此屬性用來定義handler句柄名稱，此值需要和aura:registerEvent的name的值相同，這裏是componentEvent；

event ： 此屬性用來綁定對應的component event，此值和aura:registerEvent的type的值相同，這裏是c:messageEvt；

action ： 此屬性用來綁定當事件執行後需要調用的controller js的方法；

phase ： 自定義事件可以分成兩種phase，分別為Bubble和Capture，默認為Bubble。以後會對這兩種區別進行說明；

value ： 此屬性用來定義監控的值，通常在自定義的事件中不會設置，此屬性更多的會應用在 aura:handler name 為 ‘init‘ 以及‘change‘的情況。

<aura:component>
    <aura:attribute name="messageAttribute" type="String" default="test"/>
    <aura:registerEvent name="componentEvent" type="c:messageEvt"/>
    <aura:handler name="init" value="{!this}" action="{!c.handlerInit}"/>
    <aura:handler name="change" value="{!v.messageAttribute}" action="{!c.handlerMessageChange}"/>
    <aura:handler name="componentEvent" event="c:messageEvt" action="{!c.handlerMessageEvt}" phase="bubble"/>
</aura:component>

四. 觸發事件（Fire Event）：觸發事件需要寫在controller.js中，這裏是MessageEventComponentController.js

當controller/helper js 可以使用component.getEvent(eventName) 來獲取事件的實例化變量（這裏的eventName取得是registerEvent中的name值），通過setParam方法設置自定義事件中設置的aura:attribute，通過fire()方法觸發事件，事件觸發後，事件驅動模型會執行綁定的處理程序的handlerMessageEvt方法。

此處的demo為lightning component初始化會調用event handler 方法執行handlerMessageEvt函數，通過messageAttribute的變化從而執行change事件的句柄handlerMessageChange函數。

({
    handlerInit : function(component, event, helper) {
        console.log(‘execute init‘);
        var messageEvent = component.getEvent(‘componentEvent‘);
        messageEvent.setParam(‘message‘,‘testAfterUpdate‘);
        messageEvent.fire();
    },
    handlerMessageChange : function(component,event,helper) {
        console.log(‘execute change‘);
        console.log(‘old value : ‘ + event.getParam(‘oldValue‘));
        console.log(‘current value : ‘ + event.getParam(‘value‘));
    },
    handlerMessageEvt : function(component,event,helper) {
        console.log(event.getParam(‘message‘));
        component.set(‘v.messageAttribute‘,event.getParam(‘message‘));
    }
})

結果展示

創建一個MessageEventApplication包含messageEventComponent用於結果展示

<aura:application>
    <c:messageEventComponent/>
</aura:application>

運行結果如下：通過運行結果可以看出來，初始化時會執行自定義事件，自定義事件對messageAttribute的改變會觸發change標準事件。

總結：此篇只是簡單的介紹lightning中自定義Component Event的實現步驟，至於自定義Event的兩種phase以及生命周期等知識後期會深入介紹。篇中如果有錯誤的地方歡迎指正，有問題歡迎留言。

salesforce lightning零基礎學習(四) 事件（component events）簡單介紹