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类常用的方法,详情可以自行参看官方提供的文档。篇中有问题的欢迎指出,有不懂得欢迎留言。
salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇的更多相关文章
- salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇
我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue'); ...
- salesforce lightning零基础学习(十) Aura Js 浅谈三: $A、Action、Util篇
前两篇分别介绍了Component类以及Event类,此篇将会说一下 $A , Action以及 Util. 一. Action Action类通常用于和apex后台交互,设置参数,调用后台以及对结 ...
- salesforce lightning零基础学习(十一) Aura框架下APP构造实现
前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbad ...
- salesforce lightning零基础学习(十四) Toast 浅入浅出
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification h ...
- salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容
本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...
- salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)
此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...
- salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型
看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...
- salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
- salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)
在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresi ...
随机推荐
- 用php获取js变量的值
<script type="text/javascript"> var t1 = "fff"; var t2 = "<?php ec ...
- 一个域名下多个Vue项目
公司写的网站要英文和中文的,所以就写了两个项目,都是用vue写的单页面项目,但是域名只有一个,所以就想把两个vue项目合并到一个域名下面.思考:vue的页面都是单页面应用,说白了就是一个index.h ...
- 微信小程序之----制作视频弹幕
1. 文件目录 使用微信, 长度单位使用 rpx 可以避免不同设备的样式调试问题 经验总结,之前一直使用px ,发现换了测试机就崩了 2. index.wxml页面设置v ...
- javascript 新建实例对象
在main js里面new 这样一个实例算怎么回事,如果不这么new, ToolBar里就会报错: Portal.gbl = { constants : new Portal.common.Const ...
- Solidity的地址 数组如何判断是否包含一个给定的地址?
Q: given address[] wallets. What is the correct method to check that the list contains a given addre ...
- django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE or call
Error info: django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, ...
- linux resin 安装 配置 相关
resin跟tomcat一样,也是解析jsp网站的,也需要JDK的支持,所以第一步也是安装JDK,安装JDK的方法参考Tomcat中的安装JDK部分.下面介绍安装resin.resin官网http:/ ...
- Error while executing: am start -n
单纯clean project是不行的,选择File-Invalidate Caches/Restart,清除缓存,重启AS Android NDK 是在SDK前面又加上了"原生" ...
- 孤岛营救问题 (BFS+状压)
https://loj.ac/problem/6121 BFS + 状压 写过就好想,注意细节debug #include <bits/stdc++.h> #define read rea ...
- springboot 初始化 web 项目 启动报错。。。一直解决不了
1. 一个简单的SpringBoot项目,启动时报错信息: ERROR 18688 --- [cat-startStop-1] org.apache.catalina.core.ContainerBa ...