我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外，他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。
关于这部分的视频教学请大家前往： https://edu.csdn.net/course/detail/5750
事件使用范例
页面代码：
button id="clickbtn" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap"点击我/buttonjs代码：
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或者给我发邮件交流。
