微信小程式 教程之事件

什麼是事件

事件是視圖層到邏輯層的通訊方式。

事件可以將使用者的行為回饋到邏輯層進行處理。

事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

事件物件可以攜帶額外訊息，如id, dataset, touches。

事件的使用方式

在元件中綁定一個事件處理函數。

如bindtap，當使用者點擊該元件的時候會在該頁面對應的Page中找到對應的事件處理函數。

Click me!

在對應的Page定義中寫上對應的事件處理函數，參數是event。

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

可以看到log出來的訊息大致如下

{
"type": "tap",
"timeStamp": 1252,
"target": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"currentTarget": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"touches": [{
 "pageX": 30,
 "pageY": 12,
 "clientX": 30,
 "clientY": 12,
 "screenX": 112,
 "screenY": 151
}],
"detail": {
 "x": 30,
 "y": 12
}
}

事件詳解

事件分類

事件分為冒泡事件和非冒泡事件

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

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

WXML的冒泡事件清單：

類型        觸發條件

touchstart    ，如來電提醒，彈跳窗   

touchend    手指觸摸動作結束   

tap    手指觸摸後離開   

longtap    手指觸摸後離開   

longtap    手指觸摸後離開   

longtap    手指觸摸後離開   

longtap    手指觸摸後離開   

longtap    手指觸摸後，超過350ms離開   

註：除上表之外的其他組件自訂事件都是非冒泡事件，如的input事件，的scroll事件，(詳見各個組件)

事件綁定

事件綁定的寫法同組件的屬性，以key、value的形式。

key以bind或catch開頭，然後跟上事件的類型，如bindtap, catchtouchstart

value是一個字串，需要在對應的Page中定義同名的函數。不然觸發事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

如在下邊這個例子中，點擊inner view會先後觸發handleTap1和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>

事件物件

如無特殊說明，當元件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件物件。

事件物件的屬性清單：

屬性     類型      說明

type    String    事件類型    Object    觸發事件的元件的一些屬性值集合   

currentTarget    Object    目前元件中的某些屬性值集合   

touches    Array    觸控事件，觸控點資訊的陣列   

detail    Object    

target

觸發事件的來源元件。



屬性 說明

id    事件來源元件的id    

dataset    事件來源元件上由data-開頭的自訂屬性所組成的偏移量

currentTarget

事件綁定的目前元件。

屬性   說明

id    當前組件的id    

dataset    當前組件上由data-開頭的自訂屬性組成的集合   

說明: target和currentTarget可以參考上例中，點選inner view時，handleTap3收到的事件物件target和currentTarget都是inner，而handleTap2收到的事件物件target就是inner，currentTarget就是middle

dataset

在元件中可以定義資料，這些資料將會透過事件傳遞給SERVICE。 書寫方式： 以data-開頭，多個單字由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在event.target.dataset中會將連字符轉成駝峰elementType。

範例：

DataSet Test

Page({  
 bindViewTap:function(event){  
 event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法  
 event.target.dataset.alphabeta == 2 // 大写会转为小写  
 }  
})

touches

touches是一个触摸点的数组，每个触摸点包括以下属性：

      属性                     说明

pageX,pageY    距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴    

clientX,clientY    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴    

screenX,screenY    距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴    

特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

以上就是微信小程序 教程之事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！