在微信小程序中掀序，可以看到同為點(diǎn)擊事件，有的是bindtap而有的是catchtap，那么這兩者有什么區(qū)別呢萄焦？為了進(jìn)一步了解微信小程序的事件機(jī)制，在原DEMO的基礎(chǔ)上增加了一個(gè)簡(jiǎn)單的頁(yè)面冤竹。效果如下拂封。
紅黃綠分別代表三個(gè)view。 紅是最外層的鹦蠕， 黃綠依次為中底層冒签。 每一層view對(duì)應(yīng)著一個(gè)點(diǎn)擊事件。（outtap,midtap,innertap）钟病。
Page({
outtap(event){
console.log("out:"+event);
},
midtap(event){
console.log("mid:"+event)
},
innertap(event){
console.log("innertap:"+event)
}
})
首先先把所有的事件都改為bindtap萧恕。分別點(diǎn)擊inner層，middle層肠阱，out層票唆。再看看日志上打印出來(lái)的數(shù)據(jù)。
<view id="out" class="out" bindtap="outtap">
out
<view id="middle" class="middle" catchtap="midtap">
middle
<view id="inner" class="inner" bindtap="innertap">
inner
</view>
</view>
</view>
可以看到屹徘，當(dāng)為view的點(diǎn)擊時(shí)間為bindtap的時(shí)候走趋， 點(diǎn)擊最底層的innerview的時(shí)候，除了觸發(fā)innertap的點(diǎn)擊方法之外噪伊，事件還會(huì)往上進(jìn)行傳遞吆视，依次觸發(fā)midtap和outtap方法。
然后我們把middle的bindtap改成catchtap,再分別點(diǎn)擊三個(gè)視圖層酥宴。（順序 inner middle out）
可以看到啦吧，當(dāng)mid層使用了catchtap后，事件執(zhí)行到mid層之后拙寡，便不會(huì)再往上進(jìn)行傳遞授滓。
從上面的截出來(lái)的圖片中， 我們可以看到點(diǎn)擊了控件之后，返回的是一個(gè)Object對(duì)象般堆，那么這個(gè)對(duì)象里面包含什么信息呢在孝。查看官方文檔。
其中type為事件類(lèi)型淮摔，timeStamp為事件生成的時(shí)間戳私沮，target為觸發(fā)事件的組件的一些屬性值集合，currentTarget當(dāng)前組件的一些屬性值集合和橙，touches為觸摸事件仔燕，包含的信息為觸摸點(diǎn)信息的數(shù)組，detail為額外的信息集合魔招。
以下為事件的一些詳細(xì)信息晰搀。
從官方的文檔中，我們可以發(fā)現(xiàn)办斑，事件分為兩種外恕，一種是冒泡事件，另一種是非冒泡事件乡翅。
a.冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后鳞疲，該事件會(huì)向父節(jié)點(diǎn)傳遞
b.非冒泡事件:當(dāng)一個(gè)組件上的事件被出發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞蠕蚜。
顯然bindtap屬于冒泡事件建丧，catchtap屬于非冒泡事件。
除了bindtap之外波势，wxml的其他冒泡事件還有以下事件翎朱。
注：除上表之外的其他組件自定義事件都是非冒泡事件，如<form/>的submit事件尺铣，<input/>的input事件拴曲，<scroll-view/>的scroll事件。
