作者：瘋狂的貓

》》》什麽是事件

• 事件是視圖層到邏輯層的通訊方式。

• 事件可以將用戶的行為(wei) 反饋到邏輯層進行處理。

• 事件可以綁定在組件上，當達到觸發事件，就會(hui) 執行邏輯層中對應的事件處理函數。

• 事件對象可以攜帶額外信息，如id, dataset, touches。

》》》事件分類

• touchstart 手指觸摸

• touchmove 手指觸摸後移動

• touchcancel 手指觸摸動作被打斷，如彈窗和來電提醒

• touchend 手指觸摸動作結束

• tap 手指觸摸後離開

• longtap 手指觸摸後後，超過350ms離開

》》》事件綁定

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

• key 以bind或catch開頭，然後跟上事件的類型，如bindtap, catchtouchstart

• value 是一個(ge) 字符串，需要在對應的 Page 中定義(yi) 同名的函數。不然當觸發事件的時候會(hui) 報錯。 bind事件綁定不會(hui) 阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

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

• 單擊(tap)

• 雙擊(dbtap)

• 長按(longtap)

• 滑動

• 多點觸控

1.單擊

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

1. <view>
2. <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">點我吧</button>
3. </view>

mytouchstart: function(e){
    console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){    
    console.log(e.timeStamp + '- touch end')
},mytap: function(e){    
    console.log(e.timeStamp + '- tap')
}
 

2.雙擊

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

1. <view>
2. <button type="primary" bindtap="mytap">點我吧</button>
3. </view>

3.長按

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

1. <view>
2. <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
3. bindtouchend="mytouchend" bindtap="mytap">點我吧</button>
4. </view>

mytouchstart: function(e){    
    console.log(e.timeStamp + '- touch start')
},//長按事件mylongtap: function(e){    
    console.log(e.timeStamp + '- long tap')
},mytouchend: function(e){    
    console.log(e.timeStamp + '- touch end')
},mytap: function(e){    
    console.log(e.timeStamp + '- tap')
}

單擊、雙擊、長按屬於(yu) 點觸事件，會(hui) 觸發touchstart、touchend、tap事件，touchcancel事件隻能在真機模擬，不多說了。