微信小程式-檢視事件

奮程式序猿發表於2016-11-10
微信小程式事件

 

 

事件

什麼是事件

  • 事件是檢視層到邏輯層的通訊方式。
  • 事件可以將使用者的行為反饋到邏輯層進行處理。
  • 事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。
  • 事件物件可以攜帶額外資訊，如 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的冒泡事件列表：

注：除上表之外的其他元件自定義事件如無特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件。

事件繫結

事件繫結的寫法同元件的屬性，以 key、value 的形式。

  • key 以bind或catch開頭，然後跟上事件的型別，如bindtap, catchtouchstart
  • value 是一個字串，需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。

bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。

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

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

事件物件

如無特殊說明，當元件觸發事件時，邏輯層繫結該事件的處理函式會收到一個事件物件。

BaseEvent 基礎事件物件屬性列表：

 

CustomEvent 自定義事件物件屬性列表（繼承 BaseEvent）：

TouchEvent 觸控事件物件屬性列表（繼承 BaseEvent）：

 

 

特殊事件： <canvas/> 中的觸控事件不可冒泡，所以沒有 currentTarget。

type

代表事件的型別。

timeStamp

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

target

觸發事件的源元件。

currentTarget

事件繫結的當前元件。

說明： target 和 currentTarget 可以參考上例中，點選 inner view 時，handleTap3 收到的事件物件 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件物件 target 就是 inner，currentTarget 就是 middle。

dataset

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

示例：

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

touches

touches 是一個陣列，每個元素為一個 Touch 物件（canvas 觸控事件中攜帶的 touches 是 CanvasTouch 陣列）。 表示當前停留在螢幕上的觸控點。

Touch 物件

 

CanvasTouch 物件

changedTouches

changedTouches 資料格式同 touches。 表示有變化的觸控點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

detail

自定義事件所攜帶的資料，如表單元件的提交事件會攜帶使用者的輸入，媒體的錯誤事件會攜帶錯誤資訊，詳見元件定義中各個事件的定義。

 

相關文章