微信小程序常见事件类型

事件定义

　　在小程序中绑定事件可以以bind开头然后跟上事件的类型，如bindtap绑定一个点击事件，对应的值是一个字符串，需要在page构造器中定义同名函数，每次触发事件之后就会执行对应函数的内容。

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>


// pages/my/index.js
Page({
  handleTap(){
    console.log("执行了点击事件");
  }
})

常见事件类型

• touchstart      手指触摸动作开始
• touchmove    手指触摸后移动
• touchcancel  手指触摸动作被打断，如来电提醒，弹窗
• touchend       手指触摸动作结束
• tap  手指触摸后马上离开
• longpress      手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
• longtap  手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
• transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
• animationstart      会在一个 WXSS animation 动画开始时触发
• animationiteration       会在一个 WXSS animation 一次迭代结束时触发
• animationend       会在一个 WXSS animation 动画完成时触发

阻止事件冒泡

　　在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。

<view bindtap='outer'>
    <!-- catch阻止冒泡 -->
    <button catch:tap="inner">
      阻止冒泡
    </button>
  </view>

事件捕获

　　事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定。

<view bindtap='outer'>
    <view capture-bind:tap="center">
      <button bind:tap="inner">
        事件捕获
      </button>
    </view>
  </view>

事件传参

　　在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

<!-- data-参数名=’参数值’ -->
<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

　　每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){
console.log("执行了点击事件");
    // 通过currentTarget中的dataset属性可以获取时间参数
    console.log(e.currentTarget.dataset.msg);
}

关于这个事件对象其他属性

• type 事件类型
• timeStamp    页面打开到触发事件所经过的毫秒数
• target     触发事件的组件的一些属性值集合
• currentTarget       当前组件的一些属性值集合
• detail      额外的信息
• touches  触摸事件，当前停留在屏幕中的触摸点信息的数组
• changedTouches  触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。