微信小程式 教程之事件，微信小程式教程

小程式 教程之事件，小程式教程

系列文章：

小程式 教程之WXSS
小程式 教程之引用
小程式 教程之事件
小程式 教程之模板
小程式 教程之列表渲染
小程式 教程之條件渲染
小程式 教程之資料繫結
小程式 教程之WXML

什麼是事件

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

事件的使用方式

在組件中綁定一個事件處理函數。

如bindtap，當使用者點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相應的Page定義中寫上相應的事件處理函數，參數是event。

Page({ tapName: function(event) { console.log(event) }})

可以看到log出來的資訊大致如下

{"type": "tap","timeStamp": 1252,"target": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"currentTarget": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"touches": [{ "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151}],"detail": { "x": 30, "y": 12}}

事件詳解

事件分類

事件分為冒泡事件和非冒泡事件

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

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

WXML的冒泡事件列表：

類型	觸發條件
touchstart	手指觸摸
touchmove	手指觸摸後移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸後離開
longtap	手指觸摸後，超過350ms再離開

註：除上表之外的其他組件自訂事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件)

事件綁定

事件綁定的寫法同組件的屬性，以key、value的形式。

key以bind或catch開頭，然後跟上事件的類型，如bindtap, catchtouchstart

value是一個字串，需要在對應的Page中定義同名的函數。不然當觸發事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

如在下邊這個例子中，點擊inner view會先後觸發handleTap1和handleTap2(因為tap事件會冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父節點傳遞)，點擊middle view會觸發handleTap2，點擊outter view會觸發handleTap1。

<view id="outter" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3">  inner view </view> </view></view>

事件對象

如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。

事件對象的屬性列表：

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	事件產生時的時間戳記
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合
touches	Array	觸摸事件，觸摸點資訊的數組
detail	Object	額外的資訊

通用事件類型

timeStamp

該頁面開啟到觸發事件所經過的毫秒數。

target

觸發事件的源組件。

屬性	說明
id	事件來源組件的id
dataset	事件來源組件上由data-開頭的自訂屬性組成的集合
offsetLeft, offsetTop	事件來源組件的座標系統中位移量

currentTarget

事件綁定的當前組件。

屬性	說明
id	當前組件的id
dataset	當前組件上由data-開頭的自訂屬性組成的集合
offsetLeft, offsetTop	當前組件的座標系統中位移量

說明: target和currentTarget可以參考上例中，點擊inner view時，handleTap3收到的事件對象target和currentTarget都是inner，而handleTap2收到的事件對象target就是inner，currentTarget就是middle

dataset

在組件中可以定義資料，這些資料將會通過事件傳遞給SERVICE。 書寫方式： 以data-開頭，多個單詞由連字號-連結，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在event.target.dataset中會將連字號轉成駝峰elementType。

樣本：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({ bindViewTap:function(event){ event.target.dataset.alphaBeta == 1 // - 會轉為駝峰寫法 event.target.dataset.alphabeta == 2 // 大寫會轉為小寫 }})

touches

touches是一個觸摸點的數組，每個觸摸點包括以下屬性：

屬性	說明
pageX,pageY	距離文檔左上方的距離，文檔的左上方為原點 ，橫向為X軸，縱向為Y軸
clientX,clientY	距離頁面可顯示地區（螢幕除去導航條）左上方距離，橫向為X軸，縱向為Y軸
screenX,screenY	距離螢幕左上方的距離，螢幕左上方為原點，橫向為X軸，縱向為Y軸

特殊事件所攜帶的資料，如表單組件的提交事件會攜帶使用者的輸入，媒體的錯誤事件會攜帶錯誤資訊，詳見組件定義中各個事件的定義。

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！