瘋狂早茶小程序基礎(chǔ)篇六事件

1、 瘋狂早茶前面說到，小程序基礎(chǔ)篇六：小程序框架是邏輯層與 UI 層分析的設(shè)計(jì)方式，這種設(shè)計(jì)方式需要解決兩個(gè)問題UI 層響應(yīng)邏輯層邏輯和數(shù)據(jù)的變化UI 層將用戶的操作反饋到邏輯層其中前面講到的數(shù)據(jù)綁定解決了第一個(gè)問題，而則解決第二個(gè)問題什么是是視圖層到邏輯層的通訊方式。可以將用戶的行為反饋到邏輯層進(jìn)行處理?？梢越壎ㄔ诮M件上，當(dāng)達(dá)到觸發(fā)，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的處理函數(shù)。對(duì)象可以攜帶額外信息，如 id, dataset, touches?？偨Y(jié)下來就是指發(fā)生了一些事情，通常是用戶進(jìn)行了一些操作，如點(diǎn)擊某個(gè)按鈕或在屏幕上滑動(dòng)了手指。當(dāng)發(fā)生時(shí)，框架會(huì)調(diào)用處理函數(shù)(如果有的話)，這樣就可以實(shí)現(xiàn)對(duì)用戶操作的響

2、應(yīng)。綁定通過綁定來完成對(duì)用戶操作的響應(yīng)，比如要處理 view的 tap，在屬性中添加 bindtap= tapName, 然后在.js 中添加 tapName 函數(shù) /wxml Click me! /.jsPage(tapName: function(event) console.log(event)event 對(duì)象包含一些關(guān)于的數(shù)據(jù)：觸發(fā)的組件current：當(dāng)前組件type：類型timeStamp：時(shí)間戳(頁面打開到觸發(fā)所經(jīng)過的毫秒數(shù))touches：包含觸摸點(diǎn)的數(shù)組(多點(diǎn)觸控) changedTouches ：發(fā)生改變的觸摸點(diǎn)的數(shù)組(多點(diǎn)觸控)：額外的自定義信息冒泡和非冒泡為什么會(huì)有和

3、current之分呢，這是由于分為兩類，冒泡和非冒泡冒泡：當(dāng)一個(gè)組件上的被觸發(fā)后，該會(huì)向父節(jié)點(diǎn)傳遞。非冒泡：當(dāng)一個(gè)組件上的被觸發(fā)后，該不會(huì)向父節(jié)點(diǎn)傳遞。其中 tap是屬于冒泡(這也是為什么上面例子中的 event 會(huì)包含 current)，另外其它的冒泡還包括| 類型 | 觸發(fā)條件 | touchstart | 手指觸摸動(dòng)作開始 | touove | 手指觸摸后移動(dòng) | touchcancel | 手指觸摸動(dòng)作斷，如來電提醒，彈窗 | touchend | 手指觸摸動(dòng)作結(jié)束 | tap | 手指觸摸后馬上離開 | longtap | 手指觸摸后，超過 350ms 再離開 | 為什么需要冒泡有了

4、冒泡，就可以更加方便的實(shí)現(xiàn)一些功能。比如程序有一個(gè)視圖，包含用戶頭像和，當(dāng)用戶點(diǎn)擊頭像或時(shí)，進(jìn)入用戶詳情頁面。如果沒有冒泡，就需要處理頭像和的點(diǎn)擊，而現(xiàn)在只需在外層一個(gè)組件，并處理該組件的即可。冒泡在有些情況下可能會(huì)希望的冒泡行為，可以使用 catch綁定，如 catchtap，就可以的冒泡行為?？梢酝ㄟ^下面的代碼示例來加深對(duì)冒泡的理解/.wxml我是父親節(jié)點(diǎn)我是兒子節(jié)點(diǎn)我是孫子節(jié)點(diǎn)/.jsPage(handleTapOutter: function(event) console.log(父親節(jié)點(diǎn)被點(diǎn)擊),handleTapMiddle: function(event) console.log(兒子節(jié)點(diǎn)被點(diǎn)擊),handleInner: functi