[支付宝小程序PHP全栈开发]三、前端逻辑处理之事件

事件是什么

事件是用户和界面逻辑层交互的关键。例如我们通常情况下点击界面上的某个按钮跳出登录框，鼠标经过某块区域时区域的背景变成其他颜色，等等。如果熟悉js和jquery的同学就很好理解了，比如click，onchange这些就称之为事件。当用户在界面上执行某个动作时触发该事件我们来做一些其他的处理。

支付宝小程序中的事件举例

<view id="common-btn" onTap="toLogin">
   点击登录
</view>

在界面上的view的onTap时间上绑定了toLogin处理器。在这句话中大家注意我说了两个东西，一个是事件另一个是处理器。那么toLogin在哪儿实现呢？
在前边的文档中对于小程序的结构给大家说的比较明确了，一个页面的几个组成部分js,json,acss,axml我们和用户视图相关的都放在axml中而逻辑处理相关的都放在js中那么我们就可以在js中写时间处理器

Page({
  tapName(event) {
    this.setData({popUpShow:true})
  }
})

这是一个比较完整的例子，大家可以动手尝试下。

onTap="toLogin"

再来看看这句，这句是向view绑定事件处理的过程那么在这儿我们可以说“将toLogin处理函数绑定(on)在了Tap这个事件上”。从这句话我们就可以将事件、绑定、处理器三者的关系搞清楚了。
当然处理器的名称是我们可以自由定义的，那么还有两个(事件、绑定方式)有哪些可用的呢？

支付宝小程序支持的事件

通常我们使用手机的时候对于界面的操作有触摸和点击。那么支付宝小程序也是实现了这两类事件，我们来一一看看。

类型	触发条件
touchStart	触摸动作开始
touchMove	触摸后移动
touchEnd	触摸动作结束
touchcancel	触摸动作被打断，如来电提醒，弹窗
tap	触摸后马上离开
longTap	触摸后，超过300ms再离开

以上就是支付宝小程序所支持的事件。tap很像js中的click事件，还有几个触摸事件。这个很好理解我们就不多说了。

支付宝小程序支持的事件绑定方式

至此我们知道on是一种绑定事件的方式。那还有没有其他方式呢？
是由的，还有一种事件绑定的方式为catch
在这儿大家可能在想那我什么时候用on什么时候用catch呢？这个也比较好选择要看使用的场景，这儿有一个名词叫做事件冒泡，可能前端的同学比较熟悉。那我们来解释下什么叫事件冒泡以及如何来处理，先来上示例

<view onTap="dealOne">
    <view onTap="dealTwo">
        <view onTap="dealThree">
        点击我吧
        </view>
    </view>
</view>

对于以上示例大家可以试试执行结果。当然这种设计我们都觉得不可思议其实在视图逻辑设计中还真的有可能存在。那我们来分析分析
事件冒泡其实就是当父子组件同上绑定某个相同的事件时如果在子组件上出发事件则事件会向父组件传递出发父组件的事件。也就是在上个例子中dealThree,dealTwo,dealOne都会执行，而我们的设计肯定不想这样。这时候catch就能够很好的解决问题了，我们对以上示例做如下修改：

<view onTap="dealOne">
    <view onTap="dealTwo">
        <view catchTap="dealThree">
        点击我吧
        </view>
    </view>
</view>

我们将最内层的绑定方式换成了catch所以在点击时内层组件会捕获tap事件并且终止向父级冒泡。

---

好了，需要视频教程的请点击此处：http://edu.csdn.net/course/detail/5750

---