1、什么是事件

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

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

　　(3) 事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。

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

2、如何使用事件

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

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

　　(3) 標簽元素

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

(4) 綁定事件

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

3、bindtap和catchtap的區(qū)別

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

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

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

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

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

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

事件之target&&currentTarget區(qū)別

還是采用上面的wxml&&wxss代碼, 這次我們修改下js代碼的打印值;

// js
  outerTapFn(e) {
    console.log("我是外層父元素被點擊了=.=",e);
  },
  innerTapFn(e) {
    console.log("我是內(nèi)層子元素被點擊了=.=",e);
  },

 target對應(yīng)的是觸發(fā)事件的源頭組件，這個組件有可能是子組件，有可能是父組件，主要是看執(zhí)行動作的區(qū)域。而currentTarget始終對應(yīng)事件所綁定的組件;

5、例子

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

<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里代碼是在相對應(yīng)的事件打印出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執(zhí)行結(jié)果

• 點擊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阻止向上冒泡）
  

到此這篇關(guān)于微信小程序bindtap與catchtap的區(qū)別詳解的文章就介紹到這了,更多相關(guān)小程序bindtap與catchtap內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論