前面說到瘦麸，微信小程序框架是邏輯層與UI層分析的設(shè)計(jì)方式，這種設(shè)計(jì)方式需要解決兩個(gè)問題
UI層響應(yīng)邏輯層邏輯和數(shù)據(jù)的變化
UI層將用戶的操作反饋到邏輯層
其中前面講到的數(shù)據(jù)綁定解決了第一個(gè)問題，而事件則解決第二個(gè)問題
什么是事件
事件是視圖層到邏輯層的通訊方式荣刑。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件庇谆，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息凭疮，如 id, dataset, touches饭耳。
總結(jié)下來事件就是指發(fā)生了一些事情，通常是用戶進(jìn)行了一些操作执解，如點(diǎn)擊某個(gè)按鈕或在手機(jī)屏幕上滑動(dòng)了手指寞肖。當(dāng)事件發(fā)生時(shí)，框架會(huì)調(diào)用事件處理函數(shù)(如果有的話)衰腌，這樣就可以實(shí)現(xiàn)對(duì)用戶操作的響應(yīng)新蟆。
事件綁定
通過事件綁定來完成對(duì)用戶操作的響應(yīng)，比如要處理view標(biāo)簽的tap事件右蕊，在標(biāo)簽屬性中添加bindtap = 'tapName', 然后在.js中添加tapName函數(shù)
//wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
//.js
Page({
tapName: function(event) {
console.log(event)
}
})
event對(duì)象包含一些關(guān)于事件的數(shù)據(jù)：
target：觸發(fā)事件的組件
currentTarget：當(dāng)前組件
type：事件類型
timeStamp：時(shí)間戳(頁(yè)面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù))
touches：包含觸摸點(diǎn)的數(shù)組(多點(diǎn)觸控)
changedTouches ：發(fā)生改變的觸摸點(diǎn)的數(shù)組(多點(diǎn)觸控)
detail：額外的自定義信息
冒泡事件和非冒泡事件
為什么會(huì)有target和currentTarget之分呢琼稻，這是由于事件分為兩類，冒泡事件和非冒泡事件
冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后饶囚，該事件會(huì)向父節(jié)點(diǎn)傳遞帕翻。
非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞坯约。
| 類型 | 觸發(fā)條件 |
|---|---|
| touchstart | 手指觸摸動(dòng)作開始 |
| touchmove | 手指觸摸后移動(dòng) |
| touchcancel | 手指觸摸動(dòng)作被打斷熊咽，如來電提醒，彈窗 |
| touchend | 手指觸摸動(dòng)作結(jié)束 |
| tap | 手指觸摸后馬上離開 |
| longtap | 手指觸摸后闹丐，超過350ms再離開 |
其中tap事件是屬于冒泡事件(這也是為什么上面例子中的event會(huì)包含currentTarget)横殴，另外其它的冒泡事件還包括
| 類型 | 觸發(fā)條件 |
|---|---|
| touchstart | 手指觸摸動(dòng)作開始 |
| touchmove | 手指觸摸后移動(dòng) |
| touchcancel | 手指觸摸動(dòng)作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動(dòng)作結(jié)束 |
| tap | 手指觸摸后馬上離開 |
| longtap | 手指觸摸后衫仑，超過350ms再離開 |
為什么需要冒泡事件
有了冒泡事件梨与，就可以更加方便的實(shí)現(xiàn)一些功能。
比如程序有一個(gè)視圖文狱，包含用戶頭像和姓名粥鞋，當(dāng)用戶點(diǎn)擊頭像或姓名時(shí)，進(jìn)入用戶詳情頁(yè)面瞄崇。如果沒有冒泡事件呻粹，就需要處理頭像和姓名的點(diǎn)擊事件，而現(xiàn)在只需在外層包裹一個(gè)組件苏研，并處理該組件的事件即可等浊。
阻止事件冒泡
在有些情況下可能會(huì)希望阻止事件的冒泡行為，可以使用catch事件綁定摹蘑，如catchtap筹燕，就可以阻止事件的冒泡行為。
可以通過下面的代碼示例來加深對(duì)冒泡事件的理解
//.wxml
<view id="outter" bindtap="handleTapOutter">
我是父親節(jié)點(diǎn)
<view id="middle" catchtap="handleTapMiddle">
我是兒子節(jié)點(diǎn)
<view id="inner" bindtap="handleInner">
我是孫子節(jié)點(diǎn)
</view>
</view>
</view>
//.js
Page({
handleTapOutter: function(event) {
console.log("父親節(jié)點(diǎn)被點(diǎn)擊")
},
handleTapMiddle: function(event) {
console.log("兒子節(jié)點(diǎn)被點(diǎn)擊")
},
handleInner: function(event) {
console.log("孫子節(jié)點(diǎn)被點(diǎn)擊")
},
})
嘗試修改各級(jí)節(jié)點(diǎn)的tap事件綁定方式衅鹿，查看輸出的日志會(huì)有什么變化撒踪。
