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 ():
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類常用的方法,詳情可以自行參看官方提供的文件。篇中有問題的歡迎指出,有不懂得歡迎留言。