手把手教你微信小程序實戰(zhàn)開發(fā)(八)：小程序事件講解

TheBeauty2016 2017-02-07

展開全文

本帖最后由 TheBeauty2017 于 2017-1-20 22:06 編輯

微信小程序實戰(zhàn)系列教材：
1.微信小程序實戰(zhàn)開發(fā)（一）：微信小程序簡介
2.微信小程序實戰(zhàn)開發(fā)（二）：小程序基本目錄結構講解
3.微信小程序實戰(zhàn)開發(fā)（三）：小程序視圖容器（view container）
4.微信小程序實戰(zhàn)開發(fā)（四）：組件的基本使用講解
5.微信小程序實戰(zhàn)開發(fā)（五）：數(shù)據綁定講解
6.微信小程序實戰(zhàn)開發(fā) (六)：渲染標簽的使用方法講解
7.微信小程序實戰(zhàn)開發(fā) （七）:樣式模板的使用

關于小程序事件微信官方的文檔如下：【傳送門】
我們今天主要從以下幾個方法來介紹一下：微信小程序事件。

一、什么是事件?

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

我們簡單來說，
1.一種用戶的行為用戶長按某一張圖片，點擊某個按鈕，這就是用戶的行為，也是事件

2.一種通訊方式

為什么說事件也是一種通訊方式呢？因為用戶點擊按鈕的時候，這是發(fā)生在UI層的，我們的UI要把一些信息發(fā)送給我們的邏輯代碼，因此也是一種通訊方式

二、事件的類別

1.點擊事件tap

2.長按事件longtab

3.觸摸事件

（1）touchstart 開始觸摸

（2）touchend 結束觸摸

（3）touchmove 移動觸摸

（4）touchcancel取消觸摸

這里就有個問題了，結束觸摸和取消觸摸有什么區(qū)別嗎？

結束觸摸可以理解為是主動的停止的觸摸事件，比如我們正在移動一張圖片，移動完成后就是結束觸摸了，然后可能在移動的過程中，突然有事件來打斷了觸摸事件，比如電話來了，打斷了你的觸摸事件，這時候就是取消觸摸了

4.其他的觸摸事件 submit

實際上每個控件都有自己獨特的事件。

三、事件冒泡

1.首先我們先修改下啟動界面，啟動界面創(chuàng)建三個view組件，分別給他們對應的樣式和綁定他們的點擊事件，且布局是一層嵌套一層的。

.wxss的代碼

/**index.wxss**/
.view1 {
height: 500px;
width: 100%;
background-color: cyan;
}
.view2 {
height: 300px;
width: 80%;
background-color: orange;
}
.view3 {
height: 200px;
width: 60%;
background-color: red;
}

復制代碼

再到.js文件下定義這個三個點擊事件，代碼如下：

保存編譯上述代碼并點擊視圖3可以查看結果：

截圖不明顯，我們可以看動態(tài)圖就比較清楚：

仔細觀察可以看到，我們點擊界面3的時候，控制臺輸出了3行，分別是clickView1，clickView2，clickView3的點擊事件，點擊界面2的時候，控制臺輸出了clickView2和clickView1，這就說明了點擊子view的時候，也會響應父view的事件，這就是冒泡事件了，相反的，點擊子view，父view不會響應點擊事件，這就是非冒泡事件了。

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

冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

那么冒泡事件有哪些呢？

上面所提到的點擊事件，長按事件，觸摸事件都是冒泡事件，其余的都是非冒泡事件！

四、事件的綁定
事件的綁定方式有兩種：bind和catch。在上面的實例當中我們已經用過bind了，那么catch綁定事件和bind的綁定事件有什么不同呢？我們先來實例，最后在再來總結。
首先，我們將剛才實例中的view3改為catch綁定看一下效果：

<view class="view1" bindtap="clickView1">
界面1
<view class="view2" bindtap="clickView2">
界面2
<view class="view3" catchtap="clickView3">
界面3
</view>
</view>
</view>

復制代碼

點擊視圖3區(qū)域，我們可以發(fā)現(xiàn)沒有視圖2和視圖1的相應,點擊視圖2區(qū)域，視圖1區(qū)域還是有響應的。

通過上面的實例，大家應該比較清楚bind和catch的區(qū)別了吧？bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

五、事件的對象

如無特殊說明，當組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。我們還是從剛才的實例進行講解。

.wxml

<view class="view1" bindtap="clickView1">
界面1
<view class="view2" bindtap="clickView2">
界面2
<view class="view3" bindtap="clickView3">
界面3
</view>
</view>
</view>

復制代碼

我們在.wxss頁面稍作修改，在事件被執(zhí)行的時候會將事件傳遞進來，我們在函數(shù)內將事件打印出來：

clickView1: function(event) {
console.log("clickView1")
console.log(event)
},
clickView2: function() {
console.log("clickView2")
},
clickView3: function(event) {
console.log("clickView3")
console.log(event)
},

復制代碼

當我們點擊視圖3時，我們看到事件被打印出來，如下圖所示：

我們從打印出來的數(shù)據可以看出里面有綁定事件的對象（object），我們先來了解一些這些對象：

1.type：代表事件的類型。（本例中是tap類型）

2.timeStamp：頁面打開到觸發(fā)事件所經過的毫秒數(shù)。

3.target：觸發(fā)事件的源組件。

[td]

屬性	類型	說明
id	String	事件源組件的id
tagName	String	當前組件的類型
dataset	Object	事件源組件上由data-開頭的自定義屬性組成的集合

4.currentTarget：事件綁定的當前組件。[td]

屬性	類型	說明
id	String	當前組件的id
tagName	String	當前組件的類型
dataset	Object	當前組件上由data-開頭的自定義屬性組成的集合

說明：為了更好的對比 target 和 currentTarget 。我們給每個view組件加上id后再重新看一下效果。

<view class="view1" bindtap="clickView1" id="view1">
界面1
<view class="view2" bindtap="clickView2" id="view2">
界面2
<view class="view3" bindtap="clickView3" id="view3">
界面3
</view>
</view>
</view>

復制代碼

我們仔細查看一下點擊view3時，clickView3打印出來的event：

再來對比一下clickView1打印出來的log：

通過clickView的打印我們可以很明顯的看出來，currenttarget是當前打印的事件組件，而target是觸發(fā)事件的源組件。

5.dataset：在組件中可以定義數(shù)據，這些數(shù)據將會通過事件傳遞給 SERVICE。書寫方式：以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峰elementType。我們也來舉例看一下：

<view class="view1" bindtap="clickView1" id="view1" data-title="51小程序頭條" data-id="100">
界面1
<view class="view2" bindtap="clickView2" id="view2">
界面2
<view class="view3" bindtap="clickView3" id="view3">
界面3
</view>
</view>
</view>