[支付寶小程序PHP全棧開發]三、前端邏輯處理之事件

事件是什麼

事件是用戶和界面邏輯層交互的關鍵。例如我們通常情況下點擊界面上的某個按鈕跳出登錄框，鼠標經過某塊區域時區域的背景變成其他顏色，等等。如果熟悉js和jquery的同學就很好理解了，比如click，onchange這些就稱之爲事件。當用戶在界面上執行某個動作時觸發該事件我們來做一些其他的處理。

支付寶小程序中的事件舉例

<view id="common-btn" onTap="toLogin">
   點擊登錄
</view>

在界面上的view的onTap時間上綁定了toLogin處理器。在這句話中大家注意我說了兩個東西，一個是事件另一個是處理器。那麼toLogin在哪兒實現呢？
在前邊的文檔中對於小程序的結構給大家說的比較明確了，一個頁面的幾個組成部分js,json,acss,axml我們和用戶視圖相關的都放在axml中而邏輯處理相關的都放在js中那麼我們就可以在js中寫時間處理器

Page({
  tapName(event) {
    this.setData({popUpShow:true})
  }
})

這是一個比較完整的例子，大家可以動手嘗試下。

onTap="toLogin"

再來看看這句，這句是向view綁定事件處理的過程那麼在這兒我們可以說“將toLogin處理函數綁定(on)在了Tap這個事件上”。從這句話我們就可以將事件、綁定、處理器三者的關係搞清楚了。
當然處理器的名稱是我們可以自由定義的，那麼還有兩個(事件、綁定方式)有哪些可用的呢？

支付寶小程序支持的事件

通常我們使用手機的時候對於界面的操作有觸摸和點擊。那麼支付寶小程序也是實現了這兩類事件，我們來一一看看。

類型	觸發條件
touchStart	觸摸動作開始
touchMove	觸摸後移動
touchEnd	觸摸動作結束
touchcancel	觸摸動作被打斷，如來電提醒，彈窗
tap	觸摸後馬上離開
longTap	觸摸後，超過300ms再離開

以上就是支付寶小程序所支持的事件。tap很像js中的click事件，還有幾個觸摸事件。這個很好理解我們就不多說了。

支付寶小程序支持的事件綁定方式

至此我們知道on是一種綁定事件的方式。那還有沒有其他方式呢？
是由的，還有一種事件綁定的方式爲catch
在這兒大家可能在想那我什麼時候用on什麼時候用catch呢？這個也比較好選擇要看使用的場景，這兒有一個名詞叫做事件冒泡，可能前端的同學比較熟悉。那我們來解釋下什麼叫事件冒泡以及如何來處理，先來上示例

<view onTap="dealOne">
    <view onTap="dealTwo">
        <view onTap="dealThree">
        點擊我吧
        </view>
    </view>
</view>

對於以上示例大家可以試試執行結果。當然這種設計我們都覺得不可思議其實在視圖邏輯設計中還真的有可能存在。那我們來分析分析
事件冒泡其實就是當父子組件同上綁定某個相同的事件時如果在子組件上出發事件則事件會向父組件傳遞出發父組件的事件。也就是在上個例子中dealThree,dealTwo,dealOne都會執行，而我們的設計肯定不想這樣。這時候catch就能夠很好的解決問題了，我們對以上示例做如下修改：

<view onTap="dealOne">
    <view onTap="dealTwo">
        <view catchTap="dealThree">
        點擊我吧
        </view>
    </view>
</view>

我們將最內層的綁定方式換成了catch所以在點擊時內層組件會捕獲tap事件並且終止向父級冒泡。

---

好了，需要視頻教程的請點擊此處：http://edu.csdn.net/course/detail/5750

---