前面說到,微信小程式框架是邏輯層與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中文網其他相關文章!