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

lightning component基于事件驱动模型来处理用户界面的交互。这种事件驱动模型和js的事件驱动模型也很类似，能够简单的理解成四部分：

1.事件源：产生事件的地方，能够是页面中的输入框，按钮等等；

2.事件： 点击，失去焦点，初始化等等；

3.事件对象：当在事件源触发某个事件的时候，通常会产生一个事件对象，记录着事件的事件源相关信息以及相关的事件信息；

4.事件处理程序（Event Handler）：对当前的事件进行程序的处理或者函数。

接下来回到lightning中。在lightning component使用 handler方式做为事件处理程序绑定事件，用来当某些事件发生后，能够反馈到绑定到事件处理程序上。事件经过javascript controller层的action来触发执行。在事件触发之前，咱们能够设置attribute值用来做为参数传递。

事件Events 经过aura:event来声明，声明后所在的位置为aura目录下，后缀名为.evt 以下图所示。

      

事件类型分红两类： component events 以及application events.官方推荐能够状况下尽可能使用component events,后面的内容也是以component event进行说明，关于application events，感兴趣的能够自行查看文档。 event使用能够分红如下几步。

一. 建立自定义Event

自定义事件头部由aura:event做为开始， type能够为COMPONENT以及APPLICATION，type定义了当前的这个事件属于component event仍是application event。

事件还能够添加多个aura:attribute，执行此事件前能够先对这些attribute赋值来传递参数数据。在js后台部分可使用event.setParam('attributeName',attributeValue)方式对预装载的参数赋值。

咱们简单声明一个component event，名称为 messageEvt,有一个attribute，名字是message,类型为String。

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

如下的2、三步均须要写在lightning component中，这里建立了一个lighnting component:MessageEventComponent.

二. 注册事件

建立完事件后须要在lightning component中进行注册之后才能够进行接下来的使用。使用aura:registerEvent标签进行注册事件。

 aura:registerEvent有两个属性，一个是name，一个是type。name是任意起的，这个name须要和后面提到的aura:handler中的name一致。 type为你的namespace + ':' + 事件名称，这里为c:messageEvt。总体以下所示：

<aura:registerEvent name="componentEvent" type="c:messageEvt"/>

三. 设置事件的处理程序(handler)

当咱们注册完事件之后，咱们须要考虑当事件被触发之后，要作什么。因此这里咱们须要配置一下事件的handler部分，当事件触发之后，咱们让他去执行controller的某个方法去进行业务逻辑的操做。配置handler须要使用aura:handler标签，主要有几个属性：

name ： 此属性用来定义handler句柄名称，此值须要和aura:registerEvent的name的值相同，这里是componentEvent；

event ： 此属性用来绑定对应的component event，此值和aura:registerEvent的type的值相同，这里是c:messageEvt；

action ： 此属性用来绑定当事件执行后须要调用的controller js的方法；

phase ： 自定义事件能够分红两种phase，分别为Bubble和Capture，默认为Bubble。之后会对这两种区别进行说明；

value ：  此属性用来定义监控的值，一般在自定义的事件中不会设置，此属性更多的会应用在 aura:handler name 为 'init' 以及'change'的状况。

<aura:component>
    <aura:attribute name="messageAttribute" type="String" default="test"/>
    <aura:registerEvent name="componentEvent" type="c:messageEvt"/>
    <aura:handler name="init" value="{!this}" action="{!c.handlerInit}"/>
    <aura:handler name="change" value="{!v.messageAttribute}" action="{!c.handlerMessageChange}"/>
    <aura:handler name="componentEvent" event="c:messageEvt" action="{!c.handlerMessageEvt}" phase="bubble"/>
</aura:component>

四. 触发事件（Fire Event）：触发事件须要写在controller.js中，这里是MessageEventComponentController.js

当controller/helper js  可使用component.getEvent(eventName) 来获取事件的实例化变量（这里的eventName取得是registerEvent中的name值），经过setParam方法设置自定义事件中设置的aura:attribute，经过fire()方法触发事件，事件触发后，事件驱动模型会执行绑定的处理程序的handlerMessageEvt方法。

此处的demo为lightning component初始化会调用event handler 方法执行handlerMessageEvt函数，经过messageAttribute的变化从而执行change事件的句柄handlerMessageChange函数。

({
    handlerInit : function(component, event, helper) {
        console.log('execute init');
        var messageEvent = component.getEvent('componentEvent');
        messageEvent.setParam('message','testAfterUpdate');
        messageEvent.fire();
    },
    handlerMessageChange : function(component,event,helper) {
        console.log('execute change');
        console.log('old value : ' + event.getParam('oldValue'));
        console.log('current value : ' + event.getParam('value'));
    },
    handlerMessageEvt : function(component,event,helper) {
        console.log(event.getParam('message'));
        component.set('v.messageAttribute',event.getParam('message'));
    }
})

 结果展现

建立一个MessageEventApplication包含messageEventComponent用于结果展现

<aura:application>
    <c:messageEventComponent/>
</aura:application>

运行结果以下：经过运行结果能够看出来，初始化时会执行自定义事件，自定义事件对messageAttribute的改变会触发change标准事件。

 总结：此篇只是简单的介绍lightning中自定义Component Event的实现步骤，至于自定义Event的两种phase以及生命周期等知识后期会深刻介绍。篇中若是有错误的地方欢迎指正，有问题欢迎留言。