事件關鍵詞 bind 和 catch 的區別、事件物件 target 和 currentTarget 的差異

ThinkerZhang發表於2019-01-19
事件物件

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

前言

開發微信小程式離不開“事件”，對於初學者來說很難理解小程式裡的“事件”是什麼、怎麼用？ 先看看看官方文件的解釋：

事件關鍵詞 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 拿到。 於是，我們對小程式的事件有了初步的瞭解，但是當我們用的時候就發現還有很多沒有注意到的地方。

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

一、 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 開頭，可以達到點選子容器對應事件的同時自動觸發隱藏彈窗事件

二、 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 物件拿到子容器上繫結的屬性

三、思考（引伸）

1、 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 (大寫會轉為小寫)
  }
})
複製程式碼

2、 在前面引數 e 的物件裡面的 detail 物件一般是用來取表單資料，比如在 input 元件上的 value 屬性，繫結事件裡可以通過 detail.value 拿到。（關於 input 元件的詳解，敬請期待）

四、參考連結

（完）

本文作者 Thinker

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

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

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

閱讀原文

相關文章