一、什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

二、事件的使用方式

• 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• 在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

三、事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

四、实例演示 

wxml，下方代码可以看到，view上绑定了 bindtap="方法名" data-index="要传递到js的参数"

<view class="container">
  <view class="item" bindtap="showCardInfo" data-index="month">
    <view class="card">
      <image src="../../images/month.jpg" mode="widthFix"></image>
      <view class="title">月卡</view>
      <view class="price">￥48</view>
    </view>
    <view class="content">
      <h1>快洗月卡</h1>
      <view class="desc">智能快洗6次，有效期30天</view>
      <view class="price">￥48
        <text>￥90</text>
      </view>
    </view>
  </view>
  <view class="item" bindtap="showCardInfo" data-index="season">
    <view class="card">
      <image src="../../images/season.jpg" mode="widthFix"></image>
      <view class="title">季卡</view>
      <view class="price">￥90</view>
    </view>
    <view class="content">
      <h1>快洗季卡</h1>
      <view class="desc">智能快洗12次，有效期90天</view>
      <view class="price">￥90
        <text>￥180</text>
      </view>
    </view>
  </view>
  <view class="item" bindtap="showCardInfo" data-index="year">
    <view class="card">
      <image src="../../images/year.jpg" mode="widthFix"></image>
      <view class="title">年卡</view>
      <view class="price">￥399</view>
    </view>
    <view class="content">
      <h1>全年畅洗卡</h1>
      <view class="desc">智能快洗全年畅洗，有效期365天</view>
      <view class="price">￥399
        <text>￥1300</text>
      </view>
    </view>
  </view>
</view>

js

//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  showCardInfo:function(event){
    //vip会员卡类型
    var cardType = event.currentTarget.dataset.index;
    console.log(cardType);
  },
})