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类常用的方法,详情可以自行参看官方提供的文档。篇中有问题的欢迎指出,有不懂得欢迎留言。

原文地址:https://www.cnblogs.com/zero-zyq/p/9966798.html

时间: 2024-10-06 07:04:23

salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇的相关文章

salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇

我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue'); 小伙伴肯定有疑问这些方法是怎么定义的,lightning到底有多少已经声明的方法可供我们使用,此篇主要讲述aura framework为我们提供的 component的js的主要方法. 本人salesforce环境切换到lightning,URL为:https://zero-zhang-dev-ed

salesforce lightning零基础学习(四) 事件(component events)简单介绍

lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按钮等等: 2.事件: 点击,失去焦点,初始化等等: 3.事件对象:当在事件源触发某个事件的时候,一般会产生一个事件对象,记录着事件的事件源相关信息以及相关的事件信息: 4.事件处理程序(Event Handler):对当前的事件进行程序的处理或者函数. 接下来回到lightning中.在lightn

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresion}展示信息. lightning在component中解析动态值的时候,会将{!} 这个里面的变量进行动态的解析以及展示.当然这个变量可以是基础类型,自定义类型,数组集合等等,当然如果表达式为空字符串或者是空格则不会解析.偶尔特殊的要求为需要输出'{!}'这个字符串,官方文档说可以使用<aura

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

salesforce lightning零基础学习(十三) 自定义Lookup组件(Single &amp; Multiple)

上一篇简单的介绍了自定义的Lookup单选的组件,功能为通过引用组件Attribute传递相关的sObject Name,捕捉用户输入的信息,从而实现搜索的功能. 我们做项目的时候,可能要从多个表中获取数据并且选择相关的记录(单选或者多选),也可能要获取不同的变量的值,不一定是Name字段,也有可能在对某个表进行关键字搜索基础上有额外的条件过滤.此公用组件在上述的背景下进行开发,安装地址如下:https://login.salesforce.com/packaging/installPackag

salesforce lightning零基础学习(六)Lightning Data Service(LDS)

本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个lightning app可能包含了多个components,多个components不可避免的会对这个数据进行CRUD操作,如果我们针对每个component都在init操作时后台SQL进行查询,然后赋值给前台变量,进行CUD操作时,还要考虑其他component的数据是否要级联的改变,这种操作以

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce(转)

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce:http://www.aboutyun.com/thread-7567-1-1.html mapreduce学习目录总结 MapReduce学习指导及疑难解惑汇总:http://www.aboutyun.com/thread-7091-1-1.html 什么是Map/Reduce:http://www.aboutyun.com/thread-5541-1-1.html Mapreduce 整个工作机制图:http://

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce

此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结.五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解:hadoop分为hadoop1.X.hadoop2.X,并且还有hadoop生态系统.这里只能慢慢介绍了.一口也吃不成胖子. hadoop 1.x分为mapreduce与hdfs 其中mapreduce是很多人都需要迈过去的槛,它比较难以理解,我们有时候即使写出了mapreduce程序,但是还是摸不着头脑.我们不知道ke

Service Cloud 零基础(一)Case 浅谈

本片参考:https://resources.docs.salesforce.com/222/latest/en-us/sfdc/pdf/salesforce_case_implementation_guide.pdf 练习可用:https://trailhead.salesforce.com/content/learn/projects/set-up-case-escalation-entitlements 我们在工作和生活中会经历很多销售流程,买过很多产品.比如作为公司的采购部采购一批电脑,