060_關於Component Event的介紹（本文爲轉載）

轉載自：https://www.cnblogs.com/zero-zyq/p/8977093.html javascript

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

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

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

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

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

接下來回到lightning中。在lightning component使用 handler方式做爲事件處理程序綁定事件，用來當某些事件發生後，能夠反饋到綁定到事件處理程序上。事件經過javascript controller層的action來觸發執行。在事件觸發之前，咱們能夠設置attribute值用來做爲參數傳遞。spa

事件Events 經過aura:event來聲明，聲明後所在的位置爲aura目錄下，後綴名爲.evt 以下圖所示。code

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

一. 建立自定義Eventhtm

自定義事件頭部由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>

如下的2、三步均須要寫在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標準事件。

060_關於Component Event的介紹 （本文爲轉載）

060_關於Component Event的介紹（本文爲轉載）