支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)

我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外，他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。

关于这部分的视频教学请大家前往： https://edu.csdn.net/course/detail/5750

事件使用范例

页面代码：

<button id="clickbtn" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">点击我</button>

js代码：

defaultTap(event) {
    console.log(event.target.dataset.userName)
    console.log('点击者的姓名为：');
 },

这就是tap事件

常用的事件

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

事件冒泡

时间冒泡其实解释起来是个非常抽象的东西。我用伪代码给大家解释下

<我是爷爷 闹钟响后=“看报”>
    <我是爸爸  闹钟响后=“上班”>
        <我是儿子 闹钟响后=“”上学>
        </我是儿子>
    </我是爸爸>
</我是爷爷>

那这三代都有一个时间就是“闹钟响后”。也就是说闹钟响后他们要发生相关的动作。
那么冒泡怎么解释呢:冒泡就好比是家里有一个声音非常大的闹钟放在儿子的房间，只要响了后爷爷、爸爸、儿子都去干自己对应的事情。这显然是不合理的，如果爷爷想要晚起呢？是不行的。
如何处理？处理的方法是在儿子，爷爷，爸爸的房间各装一个闹钟，自己设定响铃时间。在支付宝小程序中其实就是把onTap之类的事件换成catchTap。也可以理解为，当前组件捕获了tap时间不用向上传递了。

但是有一个问题如果儿子事件是onTap但是爸爸是catchTap那么当tap事件发生在儿子上时其实爸爸的tap事件也被触发了但是爸爸是catch的方式所以爷爷的tap时间不会被触发。

事件对象

defaultTap(event) {

对于每个事件有一个默认的事件对象。也就是event那么事件对象对我们有什么用呢？当然事件对象包含了丰富的信息。包括了tap时间发生的位置，发生在哪个元素上，发生的组件的id等。当然touch事件和tap事件的event数据略有差异，这个不用细说，大家最好的办法是用

console.log(event)

打印然后获得自己想要的数据。
对象结构为：

Object {type: "touchStart", timeStamp: 1535471473292, target: Object, currentTarget: Object, touches: Array(1)…}

给事件处理器传值

我们知道在原生js中我们可以这样传值

handle(name) {
    console.log(name)
}

但是在支付宝小程序中我们不能这样写。而是要给组件设置data-*属性。例如:

<button data-site="https://blog.csdn.net/marswill" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">点击我</button>

那么在这儿data-site和data-user-name就是我们附加的数据，怎么样获取呢？

handle(event) {
    console.log(event.target.dataset.site);
    console.log(event.target.dataset.userName); //注意中划线要处理成小驼峰法
}

事件这部分比较简单，如果有更多疑惑请查看我的视频教程https://edu.csdn.net/course/detail/5750或者给我发邮件交流。