微信小程序常見事件類型

事件定義

　　在小程序中綁定事件可以以bind開頭然后跟上事件的類型，如bindtap綁定一個點擊事件，對應的值是一個字符串，需要在page構造器中定義同名函數，每次觸發事件之后就會執行對應函數的內容。

<view bindtap="handleTap">點擊事件</view>
<view bind:tap="handleTap">另一種寫法</view>


// pages/my/index.js
Page({
  handleTap(){
    console.log("執行了點擊事件");
  }
})

常見事件類型

• 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 動畫完成時觸發

阻止事件冒泡

　　在小程序中除了通過bind之外，還可以通過catch進行事件綁定，通過catch綁定的事件不會觸發事件冒泡。

<view bindtap='outer'>
    <!-- catch阻止冒泡 -->
    <button catch:tap="inner">
      阻止冒泡
    </button>
  </view>

事件捕獲

　　事件的觸發分為兩個階段，首先是捕獲階段，其次是冒泡階段。默認情況下事件都是在冒泡階段觸發。如果希望事件可以在捕獲階段觸發，可以通過capture-bind進行事件綁定。

<view bindtap='outer'>
    <view capture-bind:tap="center">
      <button bind:tap="inner">
        事件捕獲
      </button>
    </view>
  </view>

事件傳參

　　在小程序中進行事件傳參不能像傳統的Web項目中一樣，在括號里寫參數。在小程序中需要在標簽上通過data-方式定義事件所需的參數。

<!-- data-參數名=’參數值’ -->
<view bindtap="handleTap" data-msg="我是事件的參數">點擊事件</view>

　　每個事件回調觸發時，都會收到一個事件對象，通過這個對象可以獲取路由傳遞的參數。

handleTap(e){
console.log("執行了點擊事件");
    // 通過currentTarget中的dataset屬性可以獲取時間參數
    console.log(e.currentTarget.dataset.msg);
}

關於這個事件對象其他屬性

• type 事件類型
• timeStamp    頁面打開到觸發事件所經過的毫秒數
• target     觸發事件的組件的一些屬性值集合
• currentTarget       當前組件的一些屬性值集合
• detail      額外的信息
• touches  觸摸事件，當前停留在屏幕中的觸摸點信息的數組
• changedTouches  觸摸事件，當前變化的觸摸點信息的數組

這里需要注意的是target和currentTarget的區別，currentTarget為當前事件所綁定的組件，而target則是觸發該事件的源頭組件。