微信小程式實戰開發之視圖層WXML：事件

上篇文章講解了資料綁定、模板、邏輯等，主要的作用是在視圖中展示數據，以及如何展示。但只有展示是不夠的，我們需要互動。例如一個HTML頁面，可以展示文字、圖片，但還要有一些互動，像是連結、按鈕等。

互動其實就是事件了。例如HTML中 button 的 onClick ，就是點擊的時候，觸發的動作以及開發人員對應的業務邏輯處理。

一、事件小範例：bindtap

事件是視圖層到邏輯層的通訊方式。將使用者的行為回饋到邏輯層進行處理。一般是綁定在元件上，觸發時執行處理函數，並可以攜帶參數。

做一個按鈕，實作頁面跳轉。

#index.wxml：

#視圖層WXML：事件

index.js：

toEvent : function(){

    // 跳到event.wxml頁面   

#    wx.navigateTo({

          url: '/pages/wxml/event'

    })}

效果動圖

#二、事件分類：冒泡、非冒泡

冒泡事件：

    當一個元件上的事件觸發後，該事件會向父節點傳遞。

非冒泡事件：類型    觸發事件手指觸摸動作開始手指觸摸後移動#手指觸摸動作被打斷，如來電提醒，彈出視窗#手指觸摸後馬上離開

當一個元件上的事件觸發後，該事件不會傳遞到父節點。	以下為冒泡事件，其他元件事件無特殊申明都是非冒泡事件
	##touchstart
	#touchmove
	touchcancel
	touchend
手指觸摸動作結束	tap

############longtap############手指觸摸後，超過350ms再離開## #############

例如：

#事件以bind或catch開頭

bind事件綁定不會阻止冒泡事件向上冒泡，如bindtap。

catch事件綁定可以阻止冒泡事件向上冒泡，如catchtap。

因為handleTap2是catchtap，所以：

##點擊inner view，會先後觸發handleTap3、handleTap2

點擊middle view，只會觸發handleTap2

點擊outer view，會觸發handleTap1

在偵錯日誌中查看

可以看到事件執行的日誌和事件物件。

#三、事件物件

如無特殊說明，當元件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件物件。 （見上圖，事件物件）

currentTarget##Object

BaseEvent
type	String	事件類型
timeStamp	Integer
	# target	Object
觸發事件的元件的一些屬性值集合
Object	#目前元件的一些屬性值集合
#CustomEvent自訂事件（繼承BaseEvent）		#detail

###額外的資訊######################TouchEvent觸控事件（繼承BaseEvent）####### ##############touches############Array############目前停留在螢幕中的觸控點資訊的陣列##################changedTouches#############Array###########目前變更的觸控點資訊的陣列###############

事件詳細介紹請參考官方文件。

target 和currentTarget

target 和currentTarget 可以參考上例中，點選inner view 時，handleTap3 收到的事件物件target 和currentTarget 都是inner，而handleTap2 收到的事件物件target 是inner，currentTarget 是middle。

target 和currentTarget 中的dataset屬性
在元件中可以定義數據，這些數據將會透過事件傳遞給SERVICE。

書寫方式： 以data-開頭，多個單字由連字符-鏈接，所有的大寫會自動轉成小寫，連字符轉成駝峰

例如：

##touches是Touch物件的陣列

更多微信小程式實戰開發之視圖層WXML：事件相關文章請關注PHP中文網！

#