小程序之用户事件

1. 事件：一种用户的行为，一种通讯方式

2. 事件类别：点击事件（tap)，长按事件(long tap) ,触摸事件(touchstart,touchend,touchmove,touchcancel),其他(submit,input)

3.事件绑定：bind绑定（包括父域内容），catch绑定（不包括父域）

4.事件对象：类型（type），时间戳（timeStamp），事件源组件（target），当前组件（currentTarget），触摸点数（touches）

currentTarget: 发生事件的主件，而target为事件发生源

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
   view1click: function(event){
    console.log("view1click")
    console.log(event)
  },
   view2click: function(){
 console.log("view2click")
  },
   view3click: function(event){
 console.log("view3click")
 console.log(event)
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxml:

<view class="view1" bindtap="view1click" id="view1" data-title="新闻标题" data-id="100">
  view 11
      <view class="view2" bindtap="view2click" id="view2">
      view 22
            <view class="view3" bindtap="view3click" id="view3">
            view 33

            </view>
      </view>
</view>

index.wxss:

.view1{
  height: 500rpx;
  width: 100%;
  background-color: rebeccapurple;
}

.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

.view3{
  height: 300rpx;
  width: 60%;
  background-color: saddlebrown;
}