上一篇介绍了lightning component events的简单介绍。此篇针对上一篇进行深入，主要讲的内容为component event中的阶段(Phase)。

一. 阶段(Phase)的概念

lightning对于 component event提供了两种Phase方式，Capture(捕获阶段)以及Bubble(冒泡阶段)。这两种方式和javascript中针对事件处理的Capture以及Bubble很相似。先以javascript中的针对DOM结构事件监听进行描述。

以一个demo进行讲解。

<html>

    <body>

        <div id="sampleDivId">

            <a id="sampleAId">

                <span id="sampleSpanId">

                    test event phase

                </span>

            </a>

        </div>

    </body>

    <script>

        function clickHandler(e) {

            console.log(e.currentTarget.tagName);

        }

        //第三个参数为 true/false. true代表 capture 方式，false代表bubble方式，默认为false

        document.getElementById('sampleSpanId').addEventListener('click',clickHandler);

        //document.getElementById('sampleDivId').addEventListener('click',clickHandler);这种方式和下面方式等同，默认为bubble

        document.getElementById('sampleDivId').addEventListener('click',clickHandler,false);

        document.getElementById(sampleAId).getEventListener('click',clickHandler,false);

    </script>

</html>

当我们点击 test event phase 时，因为span,a,div都有事件绑定，所以会执行三个事件，那顺序应该如何呢？首先先引入两个概念：

1. target： 实际触发者，即设置事件的元素，此处为span元素;
2. currentTarget: 当前触发事件的元素，即当前在执行事件的元素。

针对包含多个元素的执行顺序，首先先要知道DOM结构中的事件传播方式。DOM中针对事件的传播有三个阶段：

1. capture(捕获阶段)：从根元素到事件目标元素(不算目标元素)从上到下，例子中为 document -> body -> div -> a

2. target(事件目标阶段)：目标元素，例子中为 span

3. bubble(冒泡阶段)从目标元素（不算目标元素）到根元素从下到上，例子中为 a -> div -> body -> document

针对每个事件来说， 传播的顺序为 capture -> target -> bubble ， 例子中为 document -> body -> div -> a -> span -> a -> div -> body -> document

通过传播顺序我们可以看到，除了事件源，其他元素在传播的时候都会经历两次，但针对其事件仅会调用一次，所以这就是 事件绑定时需要声明你的事件阶段为 capture 还是 bubble，因为不同的阶段会有不同的事件的调用顺序，即不同的传播路径。

demo中针对默认bubble的调用，所以打印出来的结果为：
SPAN
A
DIV

如果把demo中的参数从false转换为true,

document.getElementById('sampleSpanId').addEventListener('click',clickHandler,true);

document.getElementById('sampleDivId').addEventListener('click',clickHandler,true);

document.getElementById('sampleAId').addEventListener('click',clickHandler,true);

则打印出来的结果为：

DIV
A
SPAN

如果将demo中的参数部分div标签设置为false，a标签设置为true，

document.getElementById('sampleSpanId').addEventListener('click',clickHandler,true);

document.getElementById('sampleDivId').addEventListener('click',clickHandler,false);

document.getElementById('sampleAId').addEventListener('click',clickHandler,true);

则打印出来的结果为：

A

SPAN

DIV

二.阶段(Phase)在lightning中的使用

官方文档里面给出了一个例子很好，在这里直接引用过来。

1. 创建一个事件：compEvent

 <aura:event type="COMPONENT" description="Event template">

 </aura:event>

2.创建eventBubblingEmitter.cmp及其对应的controller.js用于注册事件以及点击按钮后触发事件。

 <aura:component>

     <aura:registerEvent name="bubblingEvent" type="c:compEvent" />

     <lightning:button onclick="{!c.fireEvent}" label="Start Bubbling"/>

 </aura:component>
 ({

     fireEvent : function(cmp) {

         var cmpEvent = cmp.getEvent("bubblingEvent");

         cmpEvent.fire();

     }

 })

3.创建eventBubblingGrandChild.cmp，包含了eventBubblingEmitter组件以及添加了事件的handler，一个元素可以通过<aura:handler>标签执行他自身的事件。

 <aura:component>

     <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>

     <div class="grandchild">

         <c:eventBubblingEmitter />

     </div>

 </aura:component>
 ({

     handleBubbling : function(component, event) {

         console.log("Grandchild handler for " + event.getName());

     }

 })

4.创建eventBubblingChild.cmp。此事件紧使用aura:handler声明了句柄，并未包含任何其他的component

 <aura:component>

     <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>

     <div class="child">

         {!v.body}

     </div>

 </aura:component>
 ({

     handleBubbling : function(component, event) {

         console.log("Child handler for " + event.getName());

     }

 })

5.创建eventBubblingParent.cmp以及对应的controller。

 <aura:component>

     <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>

     <div class="parent">

         <c:eventBubblingChild>

             <c:eventBubblingGrandchild />

         </c:eventBubblingChild>

     </div>

 </aura:component>
 ({

     handleBubbling : function(component, event) {

         console.log("Parent handler for " + event.getName());

     }

 })

6. 创建eventBubblingParentApp.app.用于可视化显示这些组件元素。

 <aura:application>

     <c:eventBubblingParent />

 </aura:application>

结果展示：


这里可能有两个疑问：

1.为什么第一个注册了事件以后，后期的直接使用aura:handler来进行执行事件，而不是每一个都需要注册事件？

2.为什么输出的结果是两项，而不是三项Log？

分析：

1. 当父元素组件在他的标签里面实例化了子元素的元素组件后，可以直接使用aura:handler来执行事件。

2.我们可以看到eventBubblingParent.cmp中层级结构为 eventBubblingParent > eventBubblingChild > eventBubblingGrandchild. 尽管eventBubblingChild是eventBubblingGrandchild的父级结构，但是lightning component event中，在组件元素中，只有最外层元素组件事件才可以被处理。所以这里面只会执行上述两个。

我们来将eventBubblingChild.cmp修改一下：

 <aura:component>

     <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>

     <!-- <div class="child">

         {!v.body}

     </div> -->

     <div class="child">

         <c:eventBubblingGrandchild />

     </div>

 </aura:component>

此组件元素中， eventBubblingChild 变成了eventBubblingGrandchild的最外层的组件元素，所以输出的时候回输出三个log结果。

结果展示：

我们可以看一下这些组件元素构成的传播顺序：

Parent handler -> Child handler -> grandchild -> Child handler -> Parent handler.

针对Bubble方式，从事件源到根为 grandchild -> Child handler -> Parent handler

针对Capture方式，从根到事件源为Parent handler -> Child handler -> grandchild.

上面的例子都是使用Bubble方式的，下面再次修改eventBubblingChild,使他 handler方式修改成capture。区别仅限于添加phase属性。

 <aura:component>

     <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}" phase="capture"/>

     <!-- <div class="child">

         {!v.body}

     </div> -->

     <div class="child">

         <c:eventBubblingGrandchild />

     </div>

 </aura:component>

结果展示：

 事件Event对象也包含了很多方法，常用的有以下几种：

1.event.setParam(obj):此方法用于事件处理时，添加事件的参数，正常事件声明时，允许有param，此demo中因为便于展示，所以没有添加param,参看上节；

2.event.fire():此方法用于触发事件；

3.event.stopPropagation(): 此方法用于停止事件在其他的组件元素传播；

上面内容中将Grandchild handler 的controller.js修改成以下：

 ({

     handleBubbling : function(component, event) {

         console.log("Grandchild handler for " + event.getName());

         event.stopPropagation();

     }

 })

结果展示：事件执行完 Grandchild handler以后，因为handler中执行了 stopPropagation方法，则后续的handler均不再执行。

4.event.pause():用于暂停正在执行的事件，直到调用event.resume()方法以后才会继续传播事件。这种常用于通过异步返回结果来判断后续要如何执行的场景；

5.event.resume():和 event.pause()一组。

总结：此篇主要讲解lightning component event中事件的两个阶段的区别以及用法，两种用法没有什么缺点和优点的划分，具体要使用哪种阶段需要考虑你的业务场景要怎样的顺序传播事件。篇中内容有错误的地方欢迎指正，有不懂得地方欢迎留言。

salesforce lightning零基础学习(五) 事件阶段（component events phase）的更多相关文章

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

    lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按 ...

  2. salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)

    此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...

  3. salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...

  4. salesforce lightning零基础学习(十一) Aura框架下APP构造实现

    前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbad ...

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

    我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue'); ...

  6. salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

    上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法. 1. setParam (String key , Object value):设置事件 ...

  7. salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

    看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...

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

    在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresi ...

  9. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

随机推荐

  1. php curl请求回来的中文为乱码

    在浏览器访问回来的编码格式是正常的,但是从php curl 请求过来的确实乱码,之前也试过这个函数好像不行,今天吧最后一个参数换了,简单粗暴,可以了mb_convert_encoding($res, ...

  2. 探索未知种族之osg类生物---呼吸分解之更新循环二

    _scene->updateSceneGraph(*_updateVisitor); 我们用了前面4节才刚刚算是完成对DatabasePager::DatabaseThread::run()函数 ...

  3. ABP 异常处理 第四篇

    1.ABP异常处理机制是通过过滤器实现的,我们查看的webAPI的异常处理,我们来看看他的源码,AbpApiExceptionFilterAttribute 继承ExceptionFilterAttr ...

  4. ABP框架系列之五十一：(Timing-定时)

    Introduction While some applications target a single timezone, some others target to many different ...

  5. s1 Linux 硬件基础

    s1 Linux硬件基础 服务器特点 1.稳定 2.方便拆卸-模块化 运维职责:运行和维护服务器 1.数据不能丢---大片不能没 2.保证网站7*24小时运行--一直要运行 3.用户体验要好----打 ...

  6. TensorFlow环境搭建

    1.使用pip安装TensorFlow 第一步安装pip: 先安装python 官网下载地址https://www.python.org在里面选择适合自己的版本 安装python的过程中pip也会随之 ...

  7. shell脚本学习-变量

    跟着RUNOOB网站的教程学习的笔记 shell变量 shell变量的命名 定义变量时,变量名不加美元符号($,PHP语言中需要),如: name="runoob" 注意,变量名与 ...

  8. hdu 1290_献给杭电五十周年校庆的礼物

    Description 或许你曾经牢骚满腹或许你依然心怀忧伤或许你近在咫尺或许你我天各一方 对于每一个学子母校 永远航行在生命的海洋 今年是我们杭电建校五十周年,这是一个值得祝福的日子.我们该送给母校 ...

  9. 【慕课网实战】Spark Streaming实时流处理项目实战笔记十五之铭文升级版

    铭文一级:[木有笔记] 铭文二级: 第12章 Spark Streaming项目实战 行为日志分析: 1.访问量的统计 2.网站黏性 3.推荐 Python实时产生数据 访问URL->IP信息- ...

  10. go的数据库操作mysql

    go get github.com/go-sql-driver/mysql package main; import ( "database/sql" _ "github ...