》》》什么是事件(官方文檔)

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進行處理。
• 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
• 事件對象可以攜帶額外信息，如id, dataset, touches。

》》》事件分類

• touchstart 手指觸摸
• touchmove 手指觸摸后移動
• touchcancel 手指觸摸動作被打斷，如彈窗和來電提醒
• touchend 手指觸摸動作結束
• tap 手指觸摸后離開
• longtap 手指觸摸后后，超過350ms離開

》》》事件綁定

事件綁定的寫法同組件的屬性，以 key、value 的形式。

• key 以bind或catch開頭，然后跟上事件的類型，如bindtap, catchtouchstart
• value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。 bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡單介紹了小程序事件基礎，是時候彰顯”事件”的威力：

• 單擊(tap)
• 雙擊(dbtap)
• 長按(longtap)
• 滑動
• 多點觸控

1.單擊

單擊事件由touchstart、touchend組成,touchend后觸發tap事件。

<view>
  <button type="primary" bindtap="mytap">點我吧</button>
</view>

mytap: function(e){
    console.log(e.timeStamp + '- tap')
}

2.雙擊

雙擊事件由兩個單擊事件組成，兩次間隔時間小于300ms認為是雙擊；微信官方文檔沒有雙擊事件，需要開發者自己定義處理。

<view>
  <button type="primary" bindtap="mytap">點我吧</button>
</view>

//觸摸事件，判斷單擊還是雙擊
mytap: function(e){
    var curTime = e.timeStamp;
    var lastTime = this.data.lastTapDiffTime;
    if(lastTime > 0){
      //如果兩次單擊間隔小于300毫秒，認為是雙擊
      if(curTime - lastTime < 300){
        console.log(e.timeStamp + '- db tap')
      }else{
        console.log(e.timeStamp + '- tap')
      }
    }else{
      console.log(e.timeStamp + '- first tap')
    }
    this.setData({lastTapDiffTime: curTime});
}

3.長按

長按事件手指觸摸后，超過350ms再離開。

<view>
  <button type="primary" bindlongtap="mylongtap">點我吧</button>
</view>

//長按事件
mylongtap: function(e){
   console.log(e.timeStamp + '- long tap')
}

單擊、雙擊、長按屬于點觸事件，會觸發touchstart、touchend、tap事件;touchcancel事件在真機方便測試，這里就不多說了。

4.滑動
目前官方沒有提供左右滑事件，復雜的手勢（多點旋轉、多點縮放，多點平移）也需要我們自己通過代碼實現。

5.多點觸控
多點觸控，只有在真機條件下才可測試，已測試。
@Roluce 童鞋已經發帖講述了，詳見新手必‘暈’的changedTouches，您肯定不知道的！（框架細節十二）

以上簡單的介紹小程序的基本事件類型和使用，復雜的手勢控制可以有多個基本觸控事件組合而成。后面篇章還會繼續深入學習事件冒泡、通過綁定事件傳參數、復雜手勢控制實現。