支付寶小程序框架 事件·介紹

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

使用方式

若要在組件中綁定一個事件處理函數(shù)，如 onTap，則需要在該頁面的 .js 文件中的 Page 里定義onTap 對應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="Alipay" onTap="tapName">
  <view id="tapTestInner" data-hi="AlipayInner">
    Click me! 
  </view>
</view>

在相應(yīng)的 Page 中定義相應(yīng)的事件處理函數(shù) tapName,參數(shù)為事件對象 event。

Page({
  tapName(event) {
    console.log(event);
  },
});

控制臺輸出 event 信息如下所示:

{
  "type": "tap",
  "timeStamp": 1550561469952,
  "target": {
    "id": "tapTestInner",
    "dataset": {
      "hi": "Alipay"
    },
    "targetDataset": {
      "hi": "AlipayInner"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "Alipay"
    }
  }
}

使用組件（基礎(chǔ)組件、擴展組件和自定義組件）時，組件里有哪些可用的事件取決于組件本身是否支持，支持的事件會在具體組件的文檔里明確列出。

事件類型

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

• 冒泡事件：以關(guān)鍵字 on 為前綴，當(dāng)組件上的事件被觸發(fā)，該事件會向父節(jié)點傳遞。
• 非冒泡事件：以關(guān)鍵字 catch 為前綴，當(dāng)組件上的事件被觸發(fā)，該事件不會向父節(jié)點傳遞。

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

• key 以 on 或 catch 開頭，然后跟上事件的類型，如 onTap、catchTap。
• value 是一個字符串，對應(yīng) Page 中定義的函數(shù)名，不存在時觸發(fā)事件會報錯。

<view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
</view>

上面代碼中，點擊 view3 會先后觸發(fā) handleTap3 和 handleTap2（因為 tap 事件會冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父節(jié)點傳遞），點擊 view2 會觸發(fā) handleTap2，點擊 view1 會觸發(fā) handleTap1。

所有會發(fā)生冒泡的事件：

常見問題

Q：大 box 的事件覆蓋了小 box 的事件，點擊小 box 也執(zhí)行了大 box 的事件怎么解決？

A：推薦使用關(guān)鍵字為 catch 前綴的非冒泡事件來阻止事件冒泡，請參見上文非冒泡事件。