salesforce lightning零基礎學習(九) Aura Js 淺談二: Event篇

上一篇介紹了Aura Framework中 Component類的部分方法，本篇将要介紹Event常用的方法。

1. setParam (String key , Object value)：設定事件的param,此項設定不會修改已經被觸發的事件。我們在建立事件的時候可以同時聲明attribute，在我們fire事件以前，可以對這些attribute設定值，其中key為attribute的name，value部分即為attribute的value。

2.setParams (Object config)：設定一組事件的param鍵值對。參數格式類似于{param1:value1 , param2:value2}。

3.fire (Object params): 觸發事件，params是可選項，如果params設定了鍵值對，則這裡的鍵值對則會覆寫原有的鍵值對。

4.getParam (String name)： 擷取params中指定name對應的value值。event fire以後，在對應的handler中可以通過getParam擷取相關param的value值。

5.getParams ()： 擷取params的所有鍵值對的集合。

6.getEventType ()： 擷取事件類型， COMPONENT/APPLICATION。

7.getName ()： 擷取注冊的事件的名稱。<aura:registerEvent name="TestEvent" type="c:TestComponentEvent"/> ,則此方法傳回 TestEvent

8.getSource ()：擷取事件對應的事件源。事件操作主要分成三部分，事件源，事件，事件handler。通過事件可以擷取到對應的資料源。

9.getPhase ()： 擷取事件階段。 capture/bubble/default.

10.getType ():  擷取注冊事件的類型。<aura:registerEvent name="TestEvent" type="c:TestComponentEvent"/> ,則此方法傳回 c:TestComponentEvent

11.pause ()：暫停事件觸發，當調用resume方法後才會繼續進行事件觸發的執行。

12.resume()：繼續進行事件觸發的執行。

13.stopPropagation ()：設定事件是否可以冒泡。調用此方法後将會停止後續的事件階段的執行。

其他方法或者上面方法的較長的描述可以自行檢視Event類的方法介紹。下面進行簡單的demo。

1.TestComponentEvent.evt: 建立一個Component類型的事件，包含兩個String類型的參數；

<aura:event type="COMPONENT" description="test component event">
    <aura:attribute name="testAttribute1" type="String"/>
    <aura:attribute name="testAttribute2" type="String"/>
</aura:event>      

2.TestComponent.cmp: 建立一個Component，注冊此事件并設定此事件對應的handler，在init函數中觸發此事件；

<aura:component>
    <aura:registerEvent name="TestComponentEvent" type="c:TestComponentEvent"/>
    <aura:handler name="TestComponentEvent" action="{!c.testComponentHandler}"/>
    <aura:attribute name="testA1" type="String"/>
    <aura:attribute name="testA2" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.initHandler}"/>
    {!v.testA1 + v.testA2}
</aura:component>      

3.TestComponentController.js : init函數中觸發事件，觸發事件設定相關的attribute值以及列印出相關的屬性

({
    initHandler : function(component, event, helper) {
        var testEvent = component.getEvent('TestComponentEvent');
        testEvent.setParam('testAttribute1','test value 1');
        testEvent.setParam('testAttribute2','test value 2');
        testEvent.fire({'testAttribute1' : 'test value 1 updated'});
    },
    testComponentHandler : function(component,event,helper) {
        component.set('v.testA1', event.getParam('testAttribute1'));
        component.set('v.testA2',event.getParam('testAttribute2'));
        console.log('type : ' + event.getType());
        console.log('event phase : ' + event.getPhase());
        console.log('event name : ' + event.getName());
        console.log('event params : ' + event.getParams());
        console.log('event param 1 : ' + event.getParam('testAttribute1'));
        console.log('event type : ' + event.getEventType());
    }
})      

結果展示：

總結：此篇主要介紹了一些Event類常用的方法，詳情可以自行參看官方提供的文檔。篇中有問題的歡迎指出，有不懂得歡迎留言。

作者：zero

部落格位址：http://www.cnblogs.com/zero-zyq/

本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接

個人下載下傳了一些相關學習的PDF檔案，如果需要下載下傳請通路百度雲 點選此處通路 密碼：jhuy

如果文章的内容對你有幫助，歡迎點贊~

為友善手機端檢視部落格，現正在将部落格遷移至微信公衆号：Salesforce零基礎學習，歡迎各位關注。