android工程師學習微信小程序筆記⑧ 小程序事件

什麼是事件

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

在小程序裏邊，我們把這種“用戶在渲染層的行爲反饋”以及“組件的部分狀態反饋”抽象爲渲染層傳遞給邏輯層的“事件”。

事件經過流程：

渲染層 -> Native -> 邏輯層

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

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

事件是通過bindtap這個屬性綁定在組件上的，同時在當前頁面的Page構造器中定義對應的事件處理函數tapName，當用戶點擊該view區域時，達到觸發條件生成事件tap，該事件處理函數tapName會被執行，同時還會收到一個事件對象event。

事件類型和事件對象

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

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

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

普通事件綁定

<view bindtap="handleTap">
    Click here!
</view>

綁定並阻止事件冒泡

與 bind 不同， catch 會阻止事件向上冒泡。

例如在下邊這個例子中，點擊 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>

互斥事件綁定

自基礎庫版本 2.8.2 起，除 bind 和 catch 外，還可以使用 mut-bind 來綁定事件。一個 mut-bind 觸發後，如果事件冒泡到其他節點上，其他節點上的 mut-bind 綁定函數不會被觸發，但 bind 綁定函數和 catch 綁定函數依舊會被觸發。

例如在下邊這個例子中，點擊 inner view 會先後調用 handleTap3 和 handleTap2 ，點擊 middle view 會調用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件的捕獲階段

自基礎庫版本 1.5.0 起，觸摸類事件支持捕獲階段。捕獲階段位於冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以採用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。

在下面的代碼中，點擊 inner view 會先後調用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果將上面代碼中的第一個capture-bind改爲capture-catch，將只觸發handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>