事件關鍵詞 bind 和 catch 的區別、事件對象 target 和 currentTarget 的差別

這是微信小程序踩坑系列的第一篇，想要了解更多關於微信小程序開發的那些事，歡迎關注個人《微信小程序》專欄。

---

前言

開發微信小程序離不開「事件」，對於初學者來講很難理解小程序裏的「事件」是什麼、怎麼用？ 先看看看官方文檔的解釋：

看着好像摸不着頭腦，其實說白了就是視圖（view）與邏輯（js）交互的通訊方式，相似於傳統網頁中的 onclick 事件，瞭解 vue 的同窗也能夠認爲是監聽指令。 一個簡單的綁定事件例子以下：

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

Page({
  tapName(e) {
    console.log(e)
  }
})
複製代碼

乍一看，確實跟 vue 語法有點像，可是有區別，那就是傳參方式不同。因此這裏須要注意的是小程序事件傳參是經過當前組件上由data-開頭的自定義屬性組成的集合。好比上面代碼定義了一個 hi 屬性，tapName 方法拿到的參數 e 展開大體以下：

{
  "type": "tap",
  "timeStamp": 895,
  "target": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "detail": {
    "x": 53,
    "y": 14
  },
  "touches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ],
  "changedTouches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ]
}
複製代碼

咱們看到這個 hi 屬性在 dataset.target 和 dataset.currentTarget 下，它（參數 e）是一個對象，也就是說綁定的 hi 屬性能夠經過 e.dataset.target.hi 或者 e.dataset.currentTarget.hi 拿到。 因而，咱們對小程序的事件有了初步的瞭解，可是當咱們用的時候就發現還有不少沒有注意到的地方。

下面接入正題，探索文章題目的疑問（固然後面還有一些彩蛋）

1、 bind 和 catch 有什麼區別

若是學過前端基礎的應該都知道 瀏覽器事件模型，它分爲捕獲、目標和冒泡三個階段（若是須要了解具體詳情，可自行百度）。 而小程序事件模型沒那麼複雜，本來只有冒泡階段，分爲冒泡事件（bind）和非冒泡事件（catch）。固然目前也支持捕獲階段，本文暫不作深刻講解，有興趣可自行查看 官方文檔 。 看到這裏，你知道了 bind 屬於冒泡事件，catch 屬於非冒泡事件，如你還不知道冒泡是什麼意思的話，那我能夠稍微解釋一下： 魚🐠在水裏突出的水泡老是從下向上浮動，最後浮出水面。而冒泡就是基於這一原理，在節點樹中有父子關係，父標籤老是嵌套着子標籤。當點擊綁定事件的子標籤以後，若是父標籤也綁定了一個事件，那麼冒泡的話也會觸發父標籤的事件，而非冒泡則不會觸發。也就是冒泡與否決定事件是否想外傳遞，方向是向「外」的（由此也提一下，捕獲與冒泡相反，事件傳遞方向是向「內」的）。 這裏看一個例子：

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">inner view</view>
  </view>
</view>
複製代碼

在上面這個例子中，點擊 inner view 會前後調用 handleTap3 和 handleTap2 (由於tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，再也不向父節點傳遞)，點擊 middle view 會觸發 handleTap2，點擊 outer view 會觸發 handleTap1。 好了，到這裏咱們就知道了 bind 不會阻止冒泡，事件會一直向上冒泡，而 catch 則會阻止冒泡，只會觸發點擊的節點事件。

巧用 bind 和 catch 綁定事件

• WXML 代碼若是沒有很複雜的層層嵌套關係，或者不涉及父子標籤都綁定事件的話，咱們用 bind 開頭的事件便可
• 若是遇到卡片式列表，裏面還有點贊或者評論等按鈕的，那麼這些子節點的事件要用 catch 開頭，不然會同時觸發父節點的事件
• 在一些自定義彈窗中，能夠給父容器定義一個隱藏彈窗的事件，而子容器的事件用 bind 開頭，能夠達到點擊子容器對應事件的同時自動觸發隱藏彈窗事件

2、 target 和 currentTarget 有什麼差別

在前面綁定事件咱們提到 hi 屬性能夠經過 target 和 currentTarget 得到，那是否是隨便用它們其中一個就能夠了呢？答案顯然不是的。 把上面的例子作一個修改：

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" data-hi="middle" catchtap="handleTap2">
    middle view
    <view id="inner" data-hi="inner" bindtap="handleTap3">inner view</view>
  </view>
</view>
複製代碼

上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。 也就是說，target 裏的屬性來源於真正點擊的那個組件，而 currentTarget 裏的屬性老是指向觸發事件綁定的組件上。 進一步說就是，currentTarget 能拿到觸發事件所在組件上綁定的任何data- 開頭的屬性，而 target 則不必定是，它拿到的只是用戶所真正點擊的那個組件上的data- 屬性。 明白了這一點，你會發現，從咱們開發者的角度來講，更多地是拿到 currentTarget 對象，而不是 target 對象。 也就是說，在開發中，咱們只要用 currentTarget 這個對象就可以符合咱們的開發要求了，不必用 target 對象，由於一不當心就會拿不到真正想要的參數。 下面這種場景是咱們之前常常犯的錯誤：

<view id="outer" data-hi="outer" bindtap="handleTap">
  outer view
  ...
  <view id="inner">inner view</view>
</view>
複製代碼

上面代碼中，若是咱們點擊 inner view 這個組件，照樣會觸發 handleTap 事件，而後咱們按照以往習慣地用長度比較短的 target 對象去拿咱們綁定的屬性，可是你會發現取不到 hi 這個屬性！而後你又點了一下 outer view，這時候有見鬼了，又能夠拿到 hi 這個屬性了！（百思不得其解，看來這個 target 對象不穩定啊，仍是用 currentTarget 對象會可靠點）之前的想法就是這樣，拿參數只用 currentTarget 對象。可是咱們如今知道原理了，用起來就好辦不少了。 下面是點擊 inner view 獲得的參數：

{
    "type": "tap",
    "timeStamp": 2083,
    "target": {
        "id": "inner",
        "offsetLeft": 140,
        "offsetTop": 459,
        "dataset": {}
    },
    "currentTarget": {
        "id": "outer",
        "offsetLeft": 140,
        "offsetTop": 434,
        "dataset": {
            "hi": "outer"
        }
    },
    ... 省略無關部分 ...
}
複製代碼

下面是點擊 outer view 獲得的參數：

{
    "type": "tap",
    "timeStamp": 2083,
    "target": {
        "id": "inner",
        "offsetLeft": 140,
        "offsetTop": 459,
        "dataset": {
            "hi": "outer"
        }
    },
    "currentTarget": {
        "id": "outer",
        "offsetLeft": 140,
        "offsetTop": 434,
        "dataset": {
            "hi": "outer"
        }
    },
    ... 省略無關部分 ...
}
複製代碼

這裏結果驗證的正是我前面所說的結論，若是還沒理解，那就多看幾遍吧。

巧用 target 和 currentTarget 對象

• 通常狀況下，建議只使用 currentTarget 對象，由於它能拿到咱們想要的參數屬性
• 若是咱們須要獲取不一樣子組件綁定的屬性，好比點擊某個組件拿到該組件上綁定的屬性，才用 target 對象
• 具體應用有待挖掘，回到上面的自定義彈窗，咱們點擊子容器時能夠在隱藏彈窗事件裏經過 target 對象拿到子容器上綁定的屬性

3、思考（引申）

一、 data- 開頭的屬性書寫方式須要注意的地方：以data- 開頭，多個單詞由連字符-連接，不能有大寫(大寫會自動轉成小寫)如 data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉成駝峯 elementType。下面是一個簡單的例子：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>
複製代碼

Page({
  bindViewTap(e) {
    console.log(e.currentTarget.dataset.alphaBeta) // 1 (- 會轉爲駝峯寫法)
    console.log(e.currentTarget.dataset.alphabeta) // 2 (大寫會轉爲小寫)
  }
})
複製代碼

二、 在前面參數 e 的對象裏面的 detail 對象通常是用來取表單數據，好比在 input 組件上的 value 屬性，綁定事件裏能夠經過 detail.value 拿到。（關於 input 組件的詳解，敬請期待）

4、參考連接

• 事件·小程序

（完）

本文做者 Thinker

本文若有錯誤之處，請留言，我會及時更正

以爲對您有幫助的話就點個贊或收藏吧！

歡迎轉載或分享，轉載時請註明出處

閱讀原文