1.微信小程序?qū)崙?zhàn)開發(fā)（一）：微信小程序簡(jiǎn)介
2.微信小程序?qū)崙?zhàn)開發(fā)（二）：小程序基本目錄結(jié)構(gòu)講解
3.微信小程序?qū)崙?zhàn)開發(fā)（三）：小程序視圖容器（view container）
4.微信小程序?qū)崙?zhàn)開發(fā)（四）：組件的基本使用講解
5.微信小程序?qū)崙?zhàn)開發(fā)（五）：數(shù)據(jù)綁定講解
6.微信小程序實(shí)戰(zhàn)開發(fā)(六)：渲染標(biāo)簽的使用
7.微信小程序?qū)崙?zhàn)開發(fā) （七）:樣式模板的使用
關(guān)于小程序事件微信官方的文檔如下：【傳送門】
我們今天主要從以下幾個(gè)方法來介紹一下：微信小程序事件。
一、什么是事件?
- 事件是視圖層到邏輯層的通訊方式。
- 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
- 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
- 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。
1.一種用戶的行為用戶長(zhǎng)按某一張圖片，點(diǎn)擊某個(gè)按鈕，這就是用戶的行為，也是事件
2.一種通訊方式
為什么說事件也是一種通訊方式呢？因?yàn)橛脩酎c(diǎn)擊按鈕的時(shí)候，這是發(fā)生在UI層的，我們的UI要把一些信息發(fā)送給我們的邏輯代碼，因此也是一種通訊方式
二、事件的類別
1.點(diǎn)擊事件tap
2.長(zhǎng)按事件longtab
3.觸摸事件
（1）touchstart 開始觸摸
（2）touchend 結(jié)束觸摸
（3）touchmove 移動(dòng)觸摸
（4）touchcancel取消觸摸
這里就有個(gè)問題了，結(jié)束觸摸和取消觸摸有什么區(qū)別嗎？
結(jié)束觸摸可以理解為是主動(dòng)的停止的觸摸事件，比如我們正在移動(dòng)一張圖片，移動(dòng)完成后就是結(jié)束觸摸了，然后可能在移動(dòng)的過程中，突然有事件來打斷了觸摸事件，比如電話來了，打斷了你的觸摸事件，這時(shí)候就是取消觸摸了
4.其他的觸摸事件 submit
實(shí)際上每個(gè)控件都有自己獨(dú)特的事件。
三、事件冒泡
1.首先我們先修改下啟動(dòng)界面，啟動(dòng)界面創(chuàng)建三個(gè)view組件，分別給他們對(duì)應(yīng)的樣式和綁定他們的點(diǎn)擊事件，且布局是一層嵌套一層的。
.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文件下定義這個(gè)三個(gè)點(diǎn)擊事件，代碼如下：
保存編譯 上述代碼并點(diǎn)擊視圖3可以查看結(jié)果：
截圖不明顯，我們可以看動(dòng)態(tài)圖就比較清楚：
仔細(xì)觀察可以看到，我們點(diǎn)擊界面3的時(shí)候，控制臺(tái)輸出了3行，分別是clickView1，clickView2，clickView3的點(diǎn)擊事件，點(diǎn)擊界面2的時(shí)候，控制臺(tái)輸出了clickView2和clickView1，這就說明了點(diǎn)擊子view的時(shí)候，也會(huì)響應(yīng)父view的事件，這就是冒泡事件了，相反的，點(diǎn)擊子view，父view不會(huì)響應(yīng)點(diǎn)擊事件，這就是非冒泡事件了。
事件分為冒泡事件和非冒泡事件：
- 冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。
- 非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。
那么冒泡事件有哪些呢？
上面所提到的點(diǎn)擊事件，長(zhǎng)按事件，觸摸事件都是冒泡事件，其余的都是非冒泡事件！
四、事件的綁定事件的綁定方式有兩種：bind和catch。在上面的實(shí)例當(dāng)中我們已經(jīng)用過bind了，那么catch綁定事件和bind的綁定事件有什么不同呢？我們先來實(shí)例，最后在再來總結(jié)。
首先，我們將剛才實(shí)例中的view3改為catch綁定看一下效果：
- <view class="view1" bindtap="clickView1">
- 界面1
- <view class="view2" bindtap="clickView2">
- 界面2
- <view class="view3" catchtap="clickView3">
- 界面3
- </view>
- </view>
- </view>
通過上面的實(shí)例，大家應(yīng)該比較清楚bind和catch的區(qū)別了吧？bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
五、事件的對(duì)象
如無特殊說明，當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象。我們還是從剛才的實(shí)例進(jìn)行講解。
.wxml
- <view class="view1" bindtap="clickView1">
- 界面1
- <view class="view2" bindtap="clickView2">
- 界面2
- <view class="view3" bindtap="clickView3">
- 界面3
- </view>
- </view>
- </view>
我們?cè)?wxss頁面稍作修改，在事件被執(zhí)行的時(shí)候會(huì)將事件傳遞進(jìn)來，我們?cè)诤瘮?shù)內(nèi)將事件打印出來：
- clickView1: function(event) {
- console.log("clickView1")
- console.log(event)
- },
- clickView2: function() {
- console.log("clickView2")
- },
- clickView3: function(event) {
- console.log("clickView3")
- console.log(event)
- },
當(dāng)我們點(diǎn)擊視圖3時(shí)，我們看到事件被打印出來，如下圖所示：
我們從打印出來的數(shù)據(jù)可以看出里面有綁定事件的對(duì)象（object），我們先來了解一些這些對(duì)象：
1.type：代表事件的類型。（本例中是tap類型）
2.timeStamp：頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)。
3.target：觸發(fā)事件的源組件。
[td]屬性 | 類型 | 說明 |
| id | String | 事件源組件的id |
| tagName | String | 當(dāng)前組件的類型 |
| dataset | Object | 事件源組件上由data-開頭的自定義屬性組成的集合 |
屬性 | 類型 | 說明 |
| id | String | 當(dāng)前組件的id |
| tagName | String | 當(dāng)前組件的類型 |
| dataset | Object | 當(dāng)前組件上由data-開頭的自定義屬性組成的集合 |
說明：為了更好的對(duì)比 target 和 currentTarget 。我們給每個(gè)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>
我們仔細(xì)查看一下點(diǎn)擊view3時(shí)，clickView3打印出來的event：
再來對(duì)比一下clickView1打印出來的log：
通過clickView的打印我們可以很明顯的看出來，currenttarget是當(dāng)前打印的事件組件，而target是觸發(fā)事件的源組件。
5.dataset：在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。我們也來舉例看一下：
- <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>
我們直接點(diǎn)擊視圖3看看打印結(jié)果如下：
通過這樣的方式，我們就可以很方便的獲取控件相應(yīng)的屬性，得到這鍋屬性后，我們就可以很方便的實(shí)現(xiàn)我們的邏輯。實(shí)際上dataset的非常的實(shí)用，以后會(huì)經(jīng)常用到。
愛盈利（aiyingli.com）移動(dòng)互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動(dòng)盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見！降低門檻，讓缺乏經(jīng)驗(yàn)、資金有限的個(gè)人和團(tuán)隊(duì)獲得經(jīng)驗(yàn)和機(jī)會(huì)，提高熱情，激發(fā)產(chǎn)品。
