小程式初體驗之target和currentTarget

說起這兩個屬性，就不得不說一個事：

事件對象

小程式官方文檔中說：當事件被觸發時，處理函數會響應。傳入event對象，通過event對象可以擷取事件觸發時候的一些資訊，包括時間戳、detail等。

因為小程式内的事件綁定都是在 WXML 中實作的，是以傳遞參數隻能通過 WXML 上面的屬性值來傳遞，例如下面的代碼中，indexDetail 處理函數需要接收生活指數的名稱和詳情，來彈出彈層提示，這時候需要在标簽上增加 data-xx 這樣的屬性，data-name 和 data-detail 就是兩個屬性，通過這兩個值，可以在 indexDetail 内 event 對象的 target/currentTarget 的 dataset 擷取參數。

<view class="life-style">
    <view class="item" wx:for="{{lifeStyle}}" data-name="{{item.name}}" data-detail="{{item.detail}}" bindtap="indexDetail">
      <view class="title">
        <icon type="{{item.icon}}"></icon>
        {{item.name}}
      </view>
      <view class="content">{{item.info}}</view>
    </view>
</view>
// weather/index.js
// 響應事件的處理函數
indexDetail(e) {
  const {name, detail} = e.currentTarget.dataset
  wx.showModal({
    title: name,
    content: detail,
    showCancel: false
  })
}      

按照官方文檔，target 和 currentTarget 都有個 dataset，正确擷取 dataset 的姿勢是使用 currentTarget 的，但是有時候 target 和 currentTarget 的資料又是完全一樣的，如果這裡使用 target 的話，那麼有時候點選會彈出彈窗，有時候不會彈出，這兩者究竟是怎樣的關系呢？官方的解釋有點模棱兩可：

• target：觸發事件的源元件
• currentTarget：事件綁定的目前元件

這裡我做下詳細解釋：

• target：觸發事件的源元件，上面的代碼中，target 可能是 view.title、view.content、view.item 任意觸發事件的元件
• currentTarget：事件綁定的目前元件，上面的代碼中，隻能是真正綁定了 bindtap 的 view.item

來看這個例子：

<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 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

由此一看，可以簡單總結出來：target 是事件觸發源頭的地方，即事件開始的地方，可以冒泡到父節點觸發父節點的綁定事件；而 currentTarget 是開發者自己綁定事件的地方，即實際的綁定事件的節點。是以，如果綁定的事件有子節點，那麼 target 不會等于 currentTarget，有可能是冒泡觸發的，由此可見，擷取 dataset 的時候使用 currentTarget 是靠譜的。

擴充：detail

detail常常被用來擷取組建中的值——它 經常被用于比如form表單的傳值 ：你比如說：

<view class="form-item">
    <text class="form-item-label">使用者名：</text>
    <input 
      class="form-item-value" 
      placeholder="請輸入使用者名" 
      name="username" 
      value="{{mxc}}"
    />
  </view>      

const { username } = e.detail.value
 console.log('表單資訊: ', username);