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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

5.规范<1>

规范: 在一个项目中开始的时候,每个人都有自己的习惯与编码规范,在项目进行的过程中有些人会离职,那他的风格会在代码中体验,以后再来新人的时候,还得适应,这样代...

12430
来自专栏青青天空树

MFC--响应鼠标和键盘操作

  一.  理解鼠标事件.之前对鼠标事件的认识仅仅局限于处理控件的单击与双击事件.但实际鼠标的操作包含很多.这里将以一个画图的小程序讲解对鼠标的响应.

13810
来自专栏owent

Vim常用命令

之前有搜集过一些常用的命令脚本,其中有vim的部分。但是vim内置的很多功能那些个命令显然是不够的,而且那些记录的很多也不常用,于是想到专门开一个页面记录vim...

9420
来自专栏令仔很忙

机房收费系统——VB将MSHflexgrid控件中的数据导出为Excel

 在做机房收费系统的时候,许多窗体用到的一个功能,就是将从数据库中提取出来的数据导出到Excel中。

9410
来自专栏有趣的django

微信小程序入门(四)

WXSS(WeiXin Style Sheets)是一套样式语言,用于WXML的组件样式

29220
来自专栏用户2442861的专栏

IDEA Intellij小技巧和插件

使用IDEA Intellij已有两年,在此罗列一下在实践中觉得能有效提升开发效率的一些小技巧和插件。  1. 重设移动键 方向键和Home/End键离...

55310
来自专栏hightopo

基于HTML5 Canvas 实现矢量工控风机叶轮旋转

14640
来自专栏Golang语言社区

【Go 语言社区】Go语言条件变量的两个例子

在Go语言中 sync.Cond 代表条件变量,但它需要配置锁才能有用. var m Mutex c := NewCond(&m) 或 c := sync.N...

40970
来自专栏HT

基于HT for Web矢量实现2D叶轮旋转

之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 我们先来看下这个叶轮模型长什么样 ? 从模型上看,这个叶轮模型有三个叶片...

21150
来自专栏hbbliyong

C#基础知识回顾--委托事件

在上一篇看到他我一下子就悟了---委托,被人狂喷。说写的太空,没有什么内容之类的。所以准备在这里重写下,不过还是按着以前的方式尽量简单的写。这里我们以打篮球为...

35940

扫码关注云+社区

领取腾讯云代金券