ui静态页面基本写好了，在js中绑定事件不会写了，突然感觉对小程序还是理解的不是太多，又重新查看了下小程序官方文档把重点记录下来。

大致如下：

点击事件:Tap
长按事件:longTap
触摸事件:touchstart、touchend、touchmove、touchcancel
其他事件:submit input 等
其中，点击事件、长按事件、触摸事件都属于冒泡事件，其他事件属于非冒泡事件。

---

事件绑定

• bind
• catch
• mut-bind
• capture-bind
• capture-catch

<view  bindtap="handleTap1">

  <view  catchtap="handleTap2">

    <view  bindtap="handleTap3">

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

可以用capture-bind、capture-catch关键字取消冒泡以及中断捕获

<view bind:touchstart="handleTap1" capture-bind:touchstart="handleTap4">

  <view bind:touchstart="handleTap3" capture-bind:touchstart="handleTap5">

  </view>
  
</view>

---

事件分类

• 冒泡事件
• 非冒泡事件

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

类型	触发条件
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 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

其他事件

form表单submit事件
input的input事件
scroll-view的scroll事件

<view bindtap="{{ handlerName }}">
    Click here!
</view>

---

事件对象

1. BaseEvent 基础事件对象属性

属性	类型	说明
type	string	事件类型
timeStamp	integer	事件生成时的时间戳,页面打开到触发事件所经过的毫秒数
target	object	触发事件的组件的一些属性值集合
currentTarget	object	当前组件的一些属性值集合
mark	object	事件标记数据

<view id="tapTest" value='cc' data-hi="WeChat" bindtap="tapName"> Click me! </view>**加粗样式**

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

打印出来

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14,
  value:"cc"
}

target属性有id、dataser两个

属性	类型	说明
id	String	事件源组件的id
dataser	Object	事件源组件上由data-开头的自定义属性组成的集合

2. CustomEvent 自定义事件对象属性列表(继承BaseEvent )

属性	类型
detail	Object

detail,自定义事件所携带的数据

3. TouchEvent 触摸事件对象属性列表（继承 BaseEvent）

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

---

组件间通信与事件

组件间的基本通信方式有以下几种

• WXML 数据绑定
• 事件：用于子组件向父组件传递数据，可以传递任意数据
• 父组件还可以通过 this.selectComponent 方法获取子组件实例对象

监听事件

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})