小程序事件詳解

事件

什么是事件

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

事件的使用方式

• 在組件中綁定一個事件處理函數。

如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• 在相應的Page定義中寫上相應的事件處理函數，參數是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

• 可以看到log出來的信息大致如下：

  {
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
  }
  

事件分類

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

1. 冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。
2. 非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

WXML的冒泡事件列表：

類型	觸發條件	最低版本
touchstart	手指觸摸動作開始
touchmove	手指觸摸后移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸后馬上離開
longpress	手指觸摸后，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發	1.5.0
longtap	手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次迭代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發
touchforcechange	在支持 3D Touch 的 iPhone 設備，重按時會觸發	1.9.90

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

事件綁定和冒泡

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

• key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0起，bind和catch后可以緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。
• value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。

catch觸發事件，不會向上進行冒泡；

而bind觸發事件，會一直向上進行冒泡的；

如在下邊這個例子中，點擊 inner view 會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outer view 會觸發handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

type

代表事件的類型。

timeStamp

頁面打開到觸發事件所經過的毫秒數。

target

觸發事件的源組件。

屬性	類型	說明
id	String	事件源組件的id
tagName	String	當前組件的類型
dataset	Object	事件源組件上由data-開頭的自定義屬性組成的集合

currentTarget

事件綁定的當前組件。

屬性	類型	說明
id	String	當前組件的id
tagName	String	當前組件的類型
dataset	Object	當前組件上由data-開頭的自定義屬性組成的集合

target是觸發事件的源組件。（冒泡觸發的事件，回去尋找根源）

currentTarget事件綁定的當前組件。

dataset

在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉成駝峰elementType。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫
  }
})