923 財經資訊

微信小程序開發教程基礎篇9-事件

前麵說到，微信小程序框架是邏輯層與UI層分析的設計方式，這種設計方式需要解決兩個問題

UI層響應邏輯層邏輯和數據的變化

UI層將用戶的操作反饋到邏輯層

其中前麵講到的數據綁定解決了第一個問題，而事件則解決第二個問題

什麼是事件事件是視圖層到邏輯層的通訊方式。事件可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。事件對象可以攜帶額外信息，如 id, dataset, touches。

總結下來事件就是指發生了一些事情，通常是用戶進行了一些操作，如點擊某個按鈕或在手機屏幕上滑動了手指。當事件發生時，框架會調用事件處理函數(如果有的話)，這樣就可以實現對用戶操作的響應。

事件綁定

通過事件綁定來完成對用戶操作的響應，比如要處理

view

標簽的tap事件，在標簽屬性中添加

bindtap = 'tapName'

, 然後在.js中添加

tapName

函數

event對象包含一些關於事件的數據：

target：觸發事件的組件 currentTarget：當前組件 type：事件類型 timeStamp：時間戳(頁麵打開到觸發事件所經過的毫秒數)touches：包含觸摸點的數組(多點觸控) changedTouches ：發生改變的觸摸點的數組(多點觸控) detail：額外的自定義信息

冒泡事件和非冒泡事件

為什麼會有target和currentTarget之分呢，這是由於事件分為兩類，冒泡事件和非冒泡事件

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

其中tap事件是屬於冒泡事件(這也是為什麼上麵例子中的event會包含currentTarget)，另外其它的冒泡事件還包括

為什麼需要冒泡事件

有了冒泡事件，就可以更加方便的實現一些功能。

比如程序有一個視圖，包含用戶頭像和姓名，當用戶點擊頭像或姓名時，進入用戶詳情頁麵。如果沒有冒泡事件，就需要處理頭像和姓名的點擊事件，而現在隻需在外層包裹一個組件，並處理該組件的事件即可。

阻止事件冒泡

在有些情況下可能會希望阻止事件的冒泡行為，可以使用catch事件綁定，如catchtap，就可以阻止事件的冒泡行為。

可以通過下麵的代碼示例來加深對冒泡事件的理解

嚐試修改各級節點的tap事件綁定方式，查看輸出的日誌會有什麼變化。

最後更新：2017-10-08 07:50:28