支付寶小程序框架 事件·對象

2020-09-18 10:29 更新

組件觸發(fā)事件時,邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。

BaseEvent 基礎(chǔ)事件

BaseEvent 基礎(chǔ)事件對象屬性列表:

屬性 類型 描述
type String 事件類型
timeStamp Integer 事件生成時的時間戳
target Object 觸發(fā)事件的組件的屬性值集合

type

事件的類型。

timeStamp

事件生成時的時間戳。

target

dataset 在組件中可以定義數(shù)據(jù),這些數(shù)據(jù)將會通過事件傳遞給邏輯層。 以 data- 開頭,由連字符 -連接多個單詞,所有字母必須小寫,如 data-element-type,最終會在 event.target.dataset中會將連字符轉(zhuǎn)成駝峰 elementType

示例代碼:

<view data-alpha-beta="1"  onTap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event) {
    event.target.dataset.alphaBeta === 1; // - 會轉(zhuǎn)為駝峰寫法
  },
});

觸發(fā)事件的源組件對象,屬性列表如下:

屬性 類型 描述
id String 事件源組件的 id
tagName String 當前組件的類型
dataset Object 綁定事件的組件上由 data- 開頭的自定義屬性的集合
targetDataset Object 實際觸發(fā)事件的組件上由 data- 開頭的自定義屬性的集合

CustomEvent 自定義事件對象

CustomEvent 自定義事件對象(繼承自 BaseEvent),屬性列表如下:

屬性 類型 描述
detail Object 額外的信息

detail

自定義事件所攜帶的數(shù)據(jù)。表單組件事件會攜帶用戶的輸入信息,如 switch 組件 onChange 觸發(fā)時可通過 event.detail.value 獲取用戶選擇的狀態(tài)值,媒體的錯誤事件會攜帶錯誤信息,更多信息請參見各組件文檔事件說明。

TouchEvent 觸摸事件對象

TouchEvent 觸摸事件對象(繼承自 BaseEvent),屬性列表:

屬性 類型 描述
touches Array 當前停留在屏幕中的觸摸點信息的數(shù)組
changedTouches Array 當前變化的觸摸點信息的數(shù)組

touches 是一個數(shù)組,每個元素為一個 Touch 對象( canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 的數(shù)組),表示當前停留在屏幕上的觸摸點。

changedTouches 數(shù)據(jù)格式同 touches。 表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。

Touch 對象

屬性 類型 描述
identifier Number 觸摸點的標識符
pageX, pageY Number 距離文檔左上角的距離,左上角為原點 ,橫向為 X 軸,縱向為 Y 軸
clientX, clientY Number 距離頁面可顯示的區(qū)域(屏幕除去導航條)的距離,左上角為原點,橫向為 X 軸,縱向為 Y 軸

CanvasTouch 對象

屬性 類型 描述
identifier Number 觸摸點的標識符
x, y Number 距離 Canvas 左上角的距離,Canvas 的左上角為原點 ,橫向為 X 軸,縱向為 Y 軸

示例

touchmove 事件,當用戶觸摸下例的組件。

<view class="move-view" onTouchMove="touchMoveHandle">
</view>

頁面中響應(yīng)事件的處理函數(shù) touchMoveHandle 會被調(diào)用,TouchEvent 觸摸事件對象將作為參數(shù)傳入。

Page({
  touchMoveHandle(e){
    console.log(e)
  }
});

下面是打印的 TouchEvent 對象的信息:

{
  "type": "touchMove",
  "timeStamp": 1562241425847,
  "target": {
    "targetDataset": {},
    "tagName": "view",
    "dataset": {},
    "offsetLeft": 0,
    "offsetTop": 0
  },
  "currentTarget": {
    "tagName": "view",
    "dataset": {},
    "offsetLeft": 0,
    "offsetTop": 0
  },
  "touches": [
    {
      "clientX": 49.69140625,
      "clientY": 54.1640625,
      "identifier": 0,
      "pageX": 49.69140625,
      "pageY": 54.1640625
    }
  ],
  "changedTouches": [
    {
      "clientX": 49.69140625,
      "clientY": 54.1640625,
      "identifier": 0,
      "pageX": 49.69140625,
      "pageY": 54.1640625
    }
  ]
}
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號