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

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
• 事件對象可以攜帶額外信息，如id, dataset, touches。

》》》事件分類

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

》》》事件綁定

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

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

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

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

1.單擊

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

<view>
  <button type="primary" bindtap="mytap">點(diǎn)我吧</button>
</view>

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

2.雙擊

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

<view>
  <button type="primary" bindtap="mytap">點(diǎn)我吧</button>
</view>

//觸摸事件，判斷單擊還是雙擊
mytap: function(e){
    var curTime = e.timeStamp;
    var lastTime = this.data.lastTapDiffTime;
    if(lastTime > 0){
      //如果兩次單擊間隔小于300毫秒，認(rèn)為是雙擊
      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">點(diǎn)我吧</button>
</view>

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

單擊、雙擊、長按屬于點(diǎn)觸事件，會觸發(fā)touchstart、touchend、tap事件;touchcancel事件在真機(jī)方便測試，這里就不多說了。

4.滑動
目前官方?jīng)]有提供左右滑事件，復(fù)雜的手勢（多點(diǎn)旋轉(zhuǎn)、多點(diǎn)縮放，多點(diǎn)平移）也需要我們自己通過代碼實(shí)現(xiàn)。

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

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