程序員開發(fā)實(shí)戰(zhàn)系列《五》視圖層WXML：事件
上篇文章講解了數(shù)據(jù)綁定、模板、邏輯等，主要的作用是在視圖中展示數(shù)據(jù)，以及如何展示。但是只有展示是不夠的，我們需要互動。比如一個HTML頁面，可以展示文字、圖片，但是還要有一些互動，比如鏈接、按鈕等。
互動其實(shí)就是事件了。比如HTML中 button 的 onClick ，就是點(diǎn)擊的時候，觸發(fā)的動作以及開發(fā)人員相應(yīng)的業(yè)務(wù)邏輯處理。
一、事件小例：bindtap
事件是視圖層到邏輯層的通訊方式。將用戶的行為反饋到邏輯層進(jìn)行處理。一般是綁定在組件上，觸發(fā)時執(zhí)行處理函數(shù)，并可以攜帶參數(shù)。
做一個按鈕，實(shí)現(xiàn)頁面跳轉(zhuǎn)。
index.wxml：
- <button bindtap="toEvent">視圖層WXML：事件</button>
index.js：
- toEvent : function(){
- // 跳轉(zhuǎn)到 event.wxml頁面
- wx.navigateTo({
- url: '/pages/wxml/event'
- })
- }
效果動圖
當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞。 非冒泡事件：
當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點(diǎn)傳遞。
| 類型 | 觸發(fā)事件 |
| touchstart | 手指觸摸動作開始 |
| touchmove | 手指觸摸后移動 |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動作結(jié)束 |
| tap | 手指觸摸后馬上離開 |
| longtap | 手指觸摸后，超過350ms再離開 |
事件以bind或者catch開頭
bind事件綁定不會阻止冒泡事件向上冒泡，如bindtap。
catch事件綁定可以阻止冒泡事件向上冒泡，如catchtap。
因?yàn)閔andleTap2是catchtap，所以：
點(diǎn)擊 inner view，會先后觸發(fā) handleTap3、handleTap2
點(diǎn)擊 middle view，只會觸發(fā) handleTap2
點(diǎn)擊 outer view，會觸發(fā) handleTap1
在調(diào)試日志中查看
可以看到事件執(zhí)行的日志 和 事件對象。
三、事件對象
如無特殊說明，當(dāng)組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。（見上圖，事件對象）
| BaseEvent | ||
| type | String | 事件類型 |
| timeStamp | Integer | 事件生成時的時間戳 |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當(dāng)前組件的一些屬性值集合 |
| CustomEvent自定義事件（繼承BaseEvent） | ||
| detail | Object | 額外的信息 |
| TouchEvent觸摸事件（繼承BaseEvent） | ||
| touches | Array | 當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組 |
| changedTouches | Array | 當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組 |
事件詳細(xì)介紹請參考官方文檔。
target 和 currentTarget
target 和 currentTarget 可以參考上例中，點(diǎn)擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。
target 和 currentTarget 中的 dataset屬性 在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。
書寫方式： 以data-開頭，多個單詞由連字符-鏈接，所有的大寫會自動轉(zhuǎn)成小寫，連字符轉(zhuǎn)成駝峰
比如：
