建站
咨詢
售后
建站咨詢
新聞中心
什么是事件
- 事件是視圖層到邏輯層的通訊方式。
- 事件可以將用戶的行為反饋到邏輯層進行處理。
- 事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應的事件處理函數(shù)。
- 事件對象可以攜帶額外信息，如id, dataset, touches。
事件的使用方式
- 在組件中綁定一個事件處理函數(shù)。
如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數(shù)。
站在用戶的角度思考問題，與客戶深入溝通，找到寶興網(wǎng)站設計與寶興網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設計制作、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋寶興地區(qū)。
Click me! - 在相應的Page定義中寫上相應的事件處理函數(shù)，參數(shù)是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, }], }
事件詳解
事件分類
事件分為冒泡事件和非冒泡事件
- 冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
- 非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。
WXML的冒泡事件列表：
| 類型 | 觸發(fā)條件 |
|---|---|
| touchstart | 手指觸摸動作開始 |
| touchmove | 手指觸摸后移動 |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動作結束 |
| tap | 手指觸摸后馬上離開 |
| longtap | 手指觸摸后，超過350ms再離開 |
注：除上表之外的其他組件自定義事件都是非冒泡事件，如的submit事件，的input事件，scroll事件，(詳見各個組件)
事件綁定
事件綁定的寫法同組件的屬性，以key、value的形式。
- key以
bind或catch開頭，然后跟上事件的類型，如bindtap,catchtouchstart - value是一個字符串，需要在對應的Page中定義同名的函數(shù)。不然當觸發(fā)事件的時候會報錯。
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
如在下邊這個例子中，點擊inner view會先后觸發(fā)handleTap3和handleTap2(因為tap事件會冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父節(jié)點傳遞)，點擊middle view會觸發(fā)handleTap2，點擊outter view會觸發(fā)handleTap1。
outer view
middle view
inner view
事件對象
如無特殊說明，當組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。
BaseEvent基礎事件對象屬性列表：
| 屬性 | 類型 | 說明 |
|---|---|---|
| type | String | 事件類型 |
| timeStamp | Integer | 事件生成時的時間戳 |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當前組件的一些屬性值集合 |
CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：
| 屬性 | 類型 | 說明 |
|---|---|---|
| detail | Object | 額外的信息 |
TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：
| 屬性 | 類型 | 說明 |
|---|---|---|
| touches | Array | 觸摸事件，當前停留在屏幕中的觸摸點信息的數(shù)組 |
| changedTouches | Array | 觸摸事件，當前變化的觸摸點信息的數(shù)組 |
特殊事件：中的觸摸事件不可冒泡，所以沒有 currentTarget。
type
通用事件類型
timeStamp
該頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)。
target
觸發(fā)事件的源組件。
| 屬性 | 類型 | 說明 |
|---|---|---|
| id | String | 事件源組件的id |
| tagName | String | 當前組件的類型 |
| dataset | Object | 事件源組件上由data-開頭的自定義屬性組成的集合 |
currentTarget
事件綁定的當前組件。
| 屬性 | 類型 | 說明 |
|---|---|---|
| id | String | 當前組件的id |
| tagName | String | 當前組件的類型 |
| dataset | Object | 當前組件上由data-開頭的自定義屬性組成的集合 |
說明： target 和 currentTarget 可以參考上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。
dataset
在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。書寫方式：以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。
示例：
DataSet Test Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 會轉(zhuǎn)為駝峰寫法
event.target.dataset.alphabeta === 2 // 大寫會轉(zhuǎn)為小寫
}
})touches
touches 是一個數(shù)組，每個元素為一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數(shù)組）。 表示當前停留在屏幕上的觸摸點。
Touch 對象
| 屬性 | 類型 | 說明 |
|---|---|---|
| identifier | Number | 觸摸點的標識符 |
| pageX, pageY | Number | 距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸 |
| clientX, clientY | Number | 距離頁面可顯示區(qū)域（屏幕除去導航條）左上角距離，橫向為X軸，縱向為Y軸 |
CanvasTouch 對象
| 屬性 | 類型 | 說明 | 特殊說明 |
|---|---|---|---|
| identifier | Number | 觸摸點的標識符 | |
| x, y | Number | 距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，橫向為X軸，縱向為Y軸 |
changedTouches
changedTouches 數(shù)據(jù)格式同 touches。表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
detail
自定義事件所攜帶的數(shù)據(jù)，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。
點擊事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。
分享名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序 事件
分享URL：http://www.5511xx.com/article/cohcjjp.html
