微信小程序bindtap與catchtap的區別

1、什么是事件

　　(1) 事件是視圖層到邏輯層的通訊方式。

　　(2) 事件可以將用戶的行為反饋到邏輯層進行處理。

　　(3) 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

　　(4) 事件對象可以攜帶額外信息，如 id,dataset,touches

2、如何使用事件

　　(1) 簡單來說就是將事件綁定到組件上面，bindtap和catchtap都屬於點擊事件，綁定了之后點擊組件可以觸發這個函數。

　　(2) 函數tapName會接受一個參數event，event里面存儲了一些函數調用的上下文信息

　　(3) 標簽元素

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

　　(4) 綁定事件

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

3、bindtap和catchtap的區別

　　(1) 相同點：首先他們都是作為點擊事件函數，就是點擊時觸發。在這個作用上他們是一樣的，可以不做區分。

　　(2) 不同點：他們的不同點主要是bindtap是冒泡的，catchtap是非冒泡的。

4、小程序中事件分為冒泡事件和非冒泡事件。

　　(1) 本文以冒泡事件tap（手指觸摸后馬上離開，也就是點擊事件）為例子來區別bind和catch事件

　　(2) bindtap? 事件綁定不會阻止冒泡事件向上冒泡

　　(3) catchtap? 事件綁定可以阻止冒泡事件向上冒泡

5、例子

1、假如有三個view點擊事件都是用的bindtap，三個view是層級包含關系?

<view id="outer" bindtap="out">
    outer view
    <view id="middle" bindtap="middle">
        middle view
        <view id="inner" bindtap="inner">
            inner view
        </view>
    </view>
</view>

2、我么在js里代碼是在相對應的事件打印出log，代碼如下?

out:function(e){
    console.log("--out bindtap click")
}, middle: function (e) {
    console.log("--middle bindtap click")
}, inner: function (e) {
    console.log("--inner bindtap click")
}

3、bindtap執行結果

　　點擊out view打印出一條log --> out bindtap click

　　點擊middle view打印出兩條log --> middle bindtap click--out bindtap click

　　點擊innew view打印出三條log --> inner bindtap click--middle bindtap click--out bindtap click

　　可以看出bindtap不阻止向上冒泡，所以點擊inner一直冒泡到了最外層。

4、如果我們只修改middle view的bindtap為catchtap

　　點擊out view打印出一條log --> out bindtap click（因為沒有上層元素故而無法向上冒泡）

　　點擊middle view打印出一條log --> middle bindtap click（catchtap阻止向上冒泡）

　　點擊innew view打印出兩條log --> inner bindtap click--middle bindtap click（catchtap阻止向上冒泡）