微信小程序學習Course 2 事件

事件是用來打通邏輯層與視圖層的樞紐，我們一般在視圖層（WXML文件）對某個控件綁定事件函數，在邏輯層（JS文件）編寫事件函數代碼。

2.1 事件類型

小程序中有兩類事件

1、冒泡事件：當一個組件的事件被觸發時，該事件會向父節點傳遞數據。

2、非冒泡事件：當一個組件上的事件被觸發時，該事件不會向父節點傳輸數據。

2.2 事件綁定

事件的綁定比較簡單，在視圖層中增加類似如下代碼，事件通常有兩種開頭，一種時bind以他開頭代表普通模式；另一種是catch開頭，他會阻止冒泡事件冒泡。初期只需要用bind模式即可

<view bindtap="viewTap"> click me </view>

　　上述代碼中bindtap代表點擊事件，他所觸發的函數為viewTap，所以我們在邏輯層編寫viewTap函數即可。

如下所示：

Page({
  viewTap: function(e) {
    console.log(‘view tap‘)
  }
})

　　定義一個函數viewTap，入口參數為e，此對象會攜帶一些數據，可以供我們操作使用。

2.3 事件對象

函數viewTap，入口參數為e，此對象會攜帶一些數據，可以供我們操作使用。

1、type事件類型

e.type 事件類型，tap類型或者其他類型

2、timeStamp觸發時間

3、target觸發源

e.target.id 得到觸發源組件的id

e.target.offsetLeft 組件坐標的偏移量

e.target.offsetTop 組件坐標的偏移量

e.target.dataset.org 獲取data開頭的數據，在控件中我們可以定義data開頭的變量參數

例如

<view data-org = "test" bindtap = "tap1">

　　如上代碼視圖層定義了data-org參數，則可以在邏輯層通過e.target.dataset.org獲取其值。

4、detail

detail會對應一些表單輸入

5、touch屬性

pageX pageY文檔觸摸點偏移量

screenX screenY 屏幕偏移量

微信小程序學習Course 2 事件