在微信小程式中，可以看到同為點選事件，有的是bindtap而有的是catchtap，那麼這兩者有什麼區別呢？為了進一步瞭解微信小程式的事件機制，在原DEMO的基礎上增加了一個簡單的頁面。效果如下。

Paste_Image.png

紅黃綠分別代表三個view。 紅是最外層的， 黃綠依次為中底層。 每一層view對應著一個點選事件。（outtap,midtap,innertap）。

Page({
  outtap(event){
     console.log("out:"+event);
  },
   midtap(event){
    console.log("mid:"+event)
  },
   innertap(event){
    console.log("innertap:"+event)
  }
})
 

首先先把所有的事件都改為bindtap。分別點選inner層，middle層，out層。再看看日誌上打印出來的資料。

<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>
 

點選innertap.png

點選midtap.png

點選toptap.png

可以看到，當為view的點選時間為bindtap的時候， 點選最底層的innerview的時候，除了觸發innertap的點選方法之外，事件還會往上進行傳遞，依次觸發midtap和outtap方法。

然後我們把middle的bindtap改成catchtap,再分別點選三個檢視層。（順序 inner middle out）

點選innertap.png

點選midtap.png

點選toptap.png

可以看到，當mid層使用了catchtap後，事件執行到mid層之後，便不會再往上進行傳遞。

從上面的截出來的圖片中， 我們可以看到點選了控制元件之後，返回的是一個Object物件，那麼這個物件裡面包含什麼資訊呢。檢視官方文件。

Paste_Image.png

其中type為事件型別，timeStamp為事件生成的時間戳，target為觸發事件的元件的一些屬性值集合，currentTarget當前元件的一些屬性值集合，touches為觸控事件，包含的資訊為觸控點資訊的陣列，detail為額外的資訊集合。

以下為事件的一些詳細資訊。

Paste_Image.png

Paste_Image.png

Paste_Image.png

從官方的文件中，我們可以發現，事件分為兩種，一種是冒泡事件，另一種是非冒泡事件。
a.冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞
b.非冒泡事件:當一個元件上的事件被出發後，該事件不會向父節點傳遞。

顯然bindtap屬於冒泡事件，catchtap屬於非冒泡事件。
除了bindtap之外，wxml的其他冒泡事件還有以下事件。

冒泡事件列表.png

注：除上表之外的其他元件自定義事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件。

作者：水山一村
連結：https://www.jianshu.com/p/065f7b8bc87b
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。