1、什么是事件

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

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

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

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

2、如何使用事件

　　(1) 簡(jiǎn)單來(lái)說(shuō)就是將事件綁定到組件上面，bindtap和catchtap都屬于點(diǎn)擊事件，綁定了之后點(diǎn)擊組件可以觸發(fā)這個(gè)函數(shù)。

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

　　(3) 標(biāo)簽元素

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

(4) 綁定事件

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

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

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

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

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

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

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

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

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

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

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

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

5、例子

1、假如有三個(gè)view點(diǎn)擊事件都是用的bindtap，三個(gè)view是層級(jí)包含關(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里代碼是在相對(duì)應(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é)果

• 點(diǎn)擊out view打印出一條log --> out bindtap click
• 點(diǎn)擊middle view打印出兩條log --> middle bindtap click--out bindtap click
• 點(diǎn)擊innew view打印出三條log --> inner bindtap click--middle bindtap click--out bindtap click
• 可以看出bindtap不阻止向上冒泡，所以點(diǎn)擊inner一直冒泡到了最外層。

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

• 點(diǎn)擊out view打印出一條log --> out bindtap click（因?yàn)闆](méi)有上層元素故而無(wú)法向上冒泡）
• 點(diǎn)擊middle view打印出一條log --> middle bindtap click（catchtap阻止向上冒泡）
• 點(diǎn)擊innew view打印出兩條log --> inner bindtap click--middle bindtap click（catchtap阻止向上冒泡）
  

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

最新評(píng)論