微信小程式(事件處理)
1.什麼是事件:
事件是檢視層到邏輯層的通訊方式。
事件可以將使用者的行為反饋到邏輯層進行處理。
事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函式。
事件物件可以攜帶額外資訊,如 id, dataset, touches。
2.事件的使用方式:
在元件中繫結一個事件處理函式。
如bindtap,當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
注意:在有些時候,會出現點選一次tapName事件,會出現兩次或者多次,這個時候的解決辦法是完全關閉微信web開發者工具之後再重新啟動就好了。
在相應的Page定義中寫上相應的事件處理函式,引數是event。
Page({
tapName: function(event) {
console.log(event)
}
})
可以看到log出來的資訊大致如下:
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
3.事件分類
事件分為冒泡事件和非冒泡事件:
1.冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
2.非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。
4.事件繫結
事件繫結的寫法同組件的屬性,以 key、value 的形式。
key 以 bind 或 catch 開頭,然後跟上事件的型別,如 bindtap , catchtouchstart
value 是一個字串,需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。
bind 事件繫結不會阻止冒泡事件向上冒泡, catch 事件繫結可以阻止冒泡事件向上冒泡。
如在下邊這個例子中,點選 inner view 會先後觸發 handleTap3 和 handleTap2 (因為tap事件會冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父節點傳遞),點選 middle view 會觸發 handleTap2 ,點選 outter view 會觸發 handleTap1 。
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>