微信小程序之入門篇（一）
微信小程序之注冊(cè)篇（二）
微信小程序之開發(fā)初體驗(yàn)（三）——開發(fā)工具使用和目錄結(jié)構(gòu)
微信小程序之生命周期（四）
微信小程序之?dāng)?shù)據(jù)綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎(chǔ)組件篇——視圖容器（七）
微信小程序之基礎(chǔ)組件篇——基礎(chǔ)內(nèi)容（八）
微信小程序之基礎(chǔ)組件篇——表單組件（九）
微信小程序之基礎(chǔ)組件篇——導(dǎo)航組件（十）
微信小程序之基礎(chǔ)組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）

什么是事件

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

事件分類

事件分為冒泡事件和非冒泡事件：

• 冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。
• 非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

WXML的冒泡事件列表：

注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如<form/>
的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個(gè)組件)

事件綁定

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

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

注：bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

在編寫代碼中，使用頻率高的事件方式是

• 單擊——tap
• 長(zhǎng)按——longtap
• 滑動(dòng)——touchstart、touchmove、touchend、touchcancel

細(xì)心的讀者可能會(huì)發(fā)現(xiàn)，點(diǎn)擊事件中，還有一個(gè)很重要的事件——雙擊，小程序竟然沒有實(shí)現(xiàn)，真是神奇。不過可以通過單擊事件模擬雙擊時(shí)間實(shí)現(xiàn)。查閱資料發(fā)現(xiàn)，電腦或者手機(jī)的雙擊事件都是300ms內(nèi)連續(xù)點(diǎn)擊，所以本文也采用300ms以內(nèi)連續(xù)點(diǎn)擊視為雙擊事件。

<!--index.wxml-->
<view>
    <button bindtap="binddoubletap">點(diǎn)擊</button>
</view>

//index.js
Page({
  data: {
    //上一次點(diǎn)擊的時(shí)間
    lastTapTime:0
  },
  binddoubletap:function(e){
    //獲取點(diǎn)擊當(dāng)前時(shí)間
    var curTime = e.timeStamp
    //上一次點(diǎn)擊的時(shí)間
    var lastTime = this.data.lastTapTime
    if(lastTime > 0){
       //電腦雙擊事件間隔為300ms以內(nèi)，這里也用300ms間隔吧
      if(curTime - lastTime <300){
        console.log("雙擊事件觸發(fā)")
      }else{
        console.log("單擊事件觸發(fā)")
      }
    }else{
      console.log("單擊事件觸發(fā)")
    }
     //保存本次點(diǎn)擊的時(shí)間
    this.setData({
      lastTapTime: curTime
    })
  }
})