小程式開發中什麼是事件？

在微信小程式開發中什麼是事件？從事件的定義解釋，事件是視圖層到邏輯層的通訊方式。事件可以將使用者的行為回饋到邏輯層進行處理，同時綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。除此之外事件對象可以攜帶額外訊息，如 id, dataset, touches。

由於微信小程式框架採用邏輯層與UI層分析的設計方式，這種設計方式需要解決兩個問題：視圖層回應邏輯層邏輯和資料的變化，視圖層將使用者的操作回饋到邏輯層。微信定義了一些語法和規則來幫助開發者連接視圖層和邏輯層。透過資料綁定可以解決前一個問題，而第二個問題就需要用事件來解決。

事件綁定

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

//wxml
Click me!
//.js
Page({
tapName:function(event) {
console.log(event)
}
})

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

target：觸發事件的元件

currentTarget：目前元件

type：事件類型

timeStamp：時間戳記(頁面開啟到觸發事件所經過的毫秒數)

touches：包含觸控點的陣列(多點觸控制)

changedTouches ：發生改變的觸控點的陣列(多點觸控)

detail：額外的自訂訊息

冒泡事件和非冒泡事件

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

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

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

其中tap事件是屬於冒泡事件(這也是為什麼上面範例中的event會包含currentTarget)。

為什麼需要冒泡事件

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

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

阻止事件冒泡

在有些情況下可能會希望阻止事件的冒泡行為，可以使用catch事件綁定，如catchtap，就可以阻止事件的冒泡行為。

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

//.wxml
我是父亲节点
我是儿子节点
我是孙子节点

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

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

本文轉載自：http://zixun.jisuapp.cn/xcxkfjc/3059.html

推薦：《小程式開發教學》

以上是小程式開發中什麼是事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！