小程式開發基礎篇之事件（9）

前面說到，微信小程式框架是邏輯層與UI層分析的設計方式，這種設計方式需要解決兩個問題

UI層回應邏輯層邏輯和資料的變化
UI層將​​使用者的操作回饋到邏輯層

其中前面講到的資料綁定解決了第一個問題，而事件則解決第二個問題

什麼是事件
事件是視圖層到邏輯層的通訊方式。
事件可以將使用者的行為回饋到邏輯層進行處理。
事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件物件可以攜帶額外訊息，如 id, dataset, touches。

總結下來事件就是指發生了一些事情，通常是用戶進行了一些操作，例如點擊某個按鈕或在手機螢幕上滑動了手指。當事件發生時，框架會呼叫事件處理函數(如果有的話)，這樣就可以實現對使用者操作的回應。

事件綁定

透過事件綁定來完成對使用者操作的回應，例如要處理view標籤的tap事件，在標籤屬性中加入bindtap = 'tapName', 然後在.js中加入tapName函數

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

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

event物件包含一些關於事件的資料：

target：觸發事件的元件
currentTarget：目前元件
#type：事件類型
##timeStamp：時間戳記(頁面開啟到觸發事件所經過的毫秒數)
touches：包含觸控點的陣列(多點觸控)
changedTouches ：發生改變的觸控點的陣列(多點觸控)
detail：額外的自訂訊息

冒泡事件和非冒泡事件

為什麼會有

target和currentTarget之分呢，這是由於事件分為兩類，冒泡事件和非冒泡事件

冒泡事件：當一個元件上的事件被觸發後，該事件會傳遞給父節點。

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

其中

tap事件是屬於冒泡事件(這也是為什麼上面例子中的event會包含currentTarget)，另外其它的冒泡事件還包括| 類型| 觸發條件|
| ------------- |-------------|
| touchstart | 手指觸摸動作開始|
| touchmove | 手指觸摸後移動|
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈跳窗|
| touchend | 手指觸摸動作結束|
| tap | 手指觸摸後馬上離開|
| longtap | 手指觸摸後，超過350ms再離開|

為什麼需要冒泡事件

有了冒泡事件，就可以更方便的實作一些功能。

例如程式有一個視圖，包含使用者頭像和姓名，當使用者點擊頭像或姓名時，進入使用者詳情頁面。如果沒有冒泡事件，就需要處理頭像和姓名的點擊事件，而現在只需在外層包裹一個組件，並處理該組件的事件即可。

阻止事件冒泡

在某些情況下可能會希望阻止事件的冒泡行為，可以使用

catch事件綁定，如catchtap，就可以阻止事件的冒泡行為。

可以透過下面的程式碼範例來加深對冒泡事件的理解

//.wxml
<view id="outter" bindtap="handleTapOutter">
  我是父亲节点
  <view id="middle" catchtap="handleTapMiddle">
    我是儿子节点
    <view id="inner" bindtap="handleInner">
      我是孙子节点
    </view>
  </view>
</view>

//.js
Page({
  handleTapOutter: function(event) {
    console.log("父亲节点被点击")
  },
  handleTapMiddle: function(event) {
    console.log("儿子节点被点击")
  },
  handleInner: function(event) {
    console.log("孙子节点被点击")
  },
})

嘗試修改各級節點的tap事件綁定方式，查看輸出的日誌會有什麼變化。

以上是小程式開發基礎篇之事件（9）的詳細內容。更多資訊請關注PHP中文網其他相關文章！