TTML-事件

什么是事件

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

在組件上綁定事件

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

<!-- index.ttml -->
<view id="tapTest" data-hi="bytedance" bindtap="tapName"> Click me! </view>

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

上面的 console.log 打印出來的 event 對象的信息大致如下：

{
  "type": "tap",
  "timeStamp": 895,
  "target": {
    "id": "tapTest",
    "dataset": {
      "hi": "bytedance"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "bytedance"
    }
  },
  "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
    }
  ]
}

事件詳情說明：

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

冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。 非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

冒泡事件

事件綁定和冒泡

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

• key 以 bind 開頭，然后跟上事件的類型，如 bindtap。
• value 是一個字符串，需要在對應的 Page 中定義同名的函數(shù)。不然當觸發(fā)事件的時候會報錯。

事件對象

如無特殊說明，當組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。

BaseEvent 基礎事件對象屬性列表：

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

TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：

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

target

觸發(fā)事件的組件的一些屬性值集合;

currentTarget

事件綁定的當前組件。

dataset

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

demo：

<!-- index.ttml -->
<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; // 大寫會轉為小寫
  }
});

touches

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

Touch 對象

CanvasTouch 對象

changedTouches

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